javascript - 检查javascript文本区域中的空字符串

Question

我在网页上有一个文本区域，当字符串为空时，我想在它周围有一个边框。但它只有在我将某些内容放入文本然后再次删除时才有效。在文本区域中写入之前如何使边框可见？这是代码:

$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount === "") {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
      $("#submitbutton").on('click', function() {
        var comment = $("#message-box").val();
        $("#visible-comment").html(comment);
        $("#message-box").hide();

        console.log(comment);
        return false;
      });
    };
};

Answer 1

请检查您是否有一些语法错误。

$("#message-box").on(这一段不用关闭);

同时分离事件 $("#submitbutton").on('click', function()

还有 charCount = $("#message-box").val().length; 将返回一个数字，即使文本区域为空它也会返回一个数字 0 .所以你需要检查它作为

if (charCount==0)

所以你的最终代码变成了

$("#message-box").on("keyup", function(){
    var charCount = $("#message-box").val().length;
    console.log("charCount");
    $("#char-count").html(charCount);

    if (charCount==0) {
      $("#message-box").css("border", "10px solid red");
    }else{
      $("#message-box").css("border", "");
          //event listener
    };
});

$("#submitbutton").on('click', function() {
var comment = $("#message-box").val();
$("#visible-comment").html(comment);
$("#message-box").hide();

console.log(comment);
return false;
});

https://jsfiddle.net/tintucraju/08dp6ra5/2/