JavaScript长度和textarea maxlength不匹配

Question

问题：我有一个javascript函数，可以计算文本区域中的字符数并将其输出到我的控制台。 我的textarea上也设置了maxlength 。
问题是，有时我的sum和textarea maxlength不maxlength 。

例如，textarea会阻止我的输入，但是和变量variable会告诉我，我还剩下字符。 尤其是当我快速键入或同时插入多个字符时。

我该如何解决？ 谢谢

---

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/

Answer 1

尝试按键，它的工作原理： http : //jsfiddle.net/RnTHJ/4/

最好不过是使用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 ...如果可能，您可能正在检查所有字母和数字。 退格键使用其键码进行了明确检查。

Answer 2

您可能触发了许多“ 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/

Answer 3

我知道这是一个旧线程，但根据我的经验，它不会匹配的唯一原因是换行符。 如果您在maxlength验证中实际上将两个字符（\\ r \\ n）算作两个字段的输入/返回，则不像大多数人期望的那样只是一个（\\ n）。 也许这是计数不匹配的问题？