javascript - 文本区域计数字符未按需要工作

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>