Javascript长度和textarea maxlength不匹配

Javascript length and textarea maxlength don't match up

本文关键字：maxlength 不匹配 textarea Javascript      更新时间：2023-09-26

问题:我有一个javascript函数，计算文本区域中的字符数量并将其输出到我的控制台。我还在文本区设置了maxlength。
问题是，有时我的sum和文本区域maxlength不排队。

例如，textarea会阻塞我的输入，但是sum变量会告诉我，我还有剩余的字符。特别是当我快速输入或同时插入多个字符时。

我该如何解决这个问题?由于

HTML: 

<textarea maxlength="100"></textarea>
Javascript: 

var inputArea = $('textarea');
inputArea.keyup(function(){
   var sum = 100 - inputArea.val().length;
console.log(sum);
});

JSFiddle : http://jsfiddle.net/RnTHJ/3/

你可能会触发太多的"keyup"事件，以至于当你快速输入或一次输入多个字符时，事件不一定会按照它们被触发的顺序完成，并且你最终得到的总和是几个字符。

您可能需要尝试一个小超时，并在每次启动一个新超时时取消该超时。比如:

var timeoutVariable;
var inputArea = $('textarea');
inputArea.keyup(function(){
   window.clearTimeout(timeoutVariable);
   timeoutVariable = setTimeout(runSum(),100);
});
function runSum() {
   var sum = 100 - inputArea.val().length;
   console.log(sum);
}
http://jsfiddle.net/RnTHJ/8/

尝试按下键，它工作:http://jsfiddle.net/RnTHJ/4/

Best将使用change事件。

编辑:

如何使用keydown &而不是每次都从输入长度重新赋值。(小提琴)

var inputArea = $('textarea.test');
var sum = 100;
inputArea.keydown(function (evt) {
    var evt = window.event ? window.event : e;
    var k = evt.keyCode ? evt.keyCode : e.which;
    if(k>48) { 
        if(sum>0) sum--;
    }
    else {
         if(sum<100) sum++;   
    }
    $(this).siblings().text(sum);
});

作为样本，我只检查随机情况48…你可以检查所有的字母&数字，如果可能的话。

我知道这是一个旧的线程，但在我的经验中，它不会匹配的唯一原因是由于换行字符。如果您在字段中按enter/return键，实际计数为两个字符('r'n)，而不是像大多数人期望的那样只有一个('n)。也许这就是你计数不一致的问题?

相关文章：