Textarea计数字符无法按需工作

Question

我有简单的脚本字符计数器，但是我不明白为什么它显示5或其他任何小于10的数字作为剩余字符。它必须显示出剩余的“ 0”字符，并且如果我将一些文本粘贴到其中也没有计数文字区域。 我怎样才能解决这个问题？

HTML代码

<textarea name="" id="txtarea" cols="30" rows="10"></textarea>
<p id="demo"></p>

JS代码

var txt = document.getElementById("txtarea");
txt.setAttribute("maxlength", 50)
var maxLength = 50;
var demo = document.getElementById("demo");
var checkLength = function(){
    if(txt.value.length < maxLength) {
        var result = demo.innerHTML =  " Character remaining: " + (maxLength-txt.value.length) 
    };  
};
setInterval(checkLength, 300);

Answer 1

这是问题所在： if(txt.value.length < maxLength)

应该是： if(txt.value.length <= maxLength)

无论如何，我不会在一个时间间隔内执行此操作，而是在keyDown事件上执行。 像这样：

 var txt = document.getElementById("txtarea"); txt.setAttribute("maxlength", 50) var maxLength = 50; var demo = document.getElementById("demo"); var checkLength = function(){ if(txt.value.length <= maxLength) { var result = demo.innerHTML = " Character remaining: " + (maxLength-txt.value.length) }; }; 

 <textarea name="" id="txtarea" cols="30" onKeyDown="checkLength()" rows="10"></textarea> <p id="demo"></p> 

Answer 2

如@jolmos所说，您必须检查它是否小于或等于。 您只是在检查是否小于此值，因此它将永远不会显示“ 0”作为剩余字符数。

第二，关于粘贴时不计数的问题，请尝试将此checkLength()函数绑定到keyup / keydown事件，而不是从interval调用它。

尝试这个：

txt.addEventListener("keyup", function() {
if(txt.value.length <= maxLength) {
    var result = demo.innerHTML =  " Character remaining: " + (maxLength-txt.value.length) 
};
}

Answer 3

如果您快速键入，它将永远不会显示剩余的4或5个字符。 更好的解决方案是在其上放置一个onchange事件。 是的，应该为<= :)

Answer 4

除了它应该是txt.value.length <= maxLength的事实之外，这应该工作得很好（请查看此小提琴https://jsfiddle.net/Aides/nc39hsng/ ）

您也可以使用onkeyup和onchange代替setInterval