Question

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

$("#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/

Answer 2

无需代码来处理此问题 - 使用CSS :invalid伪类以及required属性：

＆＃13;

textarea:invalid { border: 10px solid red; }

＆＃13;

<textarea required></textarea>

＆＃13;

或者，使用:placeholder-shown伪类以及placeholder属性：

＆＃13;

textarea:placeholder-shown { border: 10px solid red; }

＆＃13;

<textarea placeholder="Type here"></textarea>

＆＃13;

获取charcount：

const messageBox     = document.getElementById('message-box');
const charCount      = document.getElementById('char-count');
const visibleComment = document.getElementById('visible-comment');

messageBox.addEventListener('input', () => {
  charCount.textContent      = messageBox.value.length;
  visibleComment.textContent = messageBox.value;
});

请注意，使用input事件优于keyup，因为后者可能无法处理诸如将文本拖放到textarea中等情况。要将评论放入visible-content，而不是使用innerHTML（或Jquery＆＃39; s .html()，这是相同的事情），请使用textContent（或{{ 1}}）;否则，输入中的.text()等HTML字符将被解释为HTML并可能损坏输出。

Answer 3

如果之前没有插入任何值，我认为您的测试无效。

你可以做到

if ($("#message-box").val() == undefined || $("#message-box").val().length == 0)

而不是

if (charCount === "") {

还要先检查值是否存在。

Answer 4

＆＃13;

function checkCharCount(){
  charCount = $("#message-box").val().length;
  $("#char-count").html(charCount);
  if (charCount === "") {
    $("#message-box").css("border", "10px solid red");
  }else{
    $("#message-box").css("border", "");
  }
}

$("#message-box").on("keyup", function(){
    checkCharCount();
});

$("#submitbutton").on('click', function() {
    var comment = $("#message-box").val();
    $("#visible-comment").html(comment);
    $("#message-box").hide();
    console.log(comment);
    return false;
});

checkCharCount();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="message-box"></textarea>
<span id="char-count"></span>

＆＃13;

您正在定义＆＃34; keyup＆＃34;事件监听器，这就是为什么它只在你输入/删除字符后才能工作。将charcheck变为函数可以避免重复。

此外还有一些错别字。

检查javascript textarea中的空字符串

4 个答案: