Javascript 长度和 textarea maxlength 不匹配答案

【问题标题】：Javascript length and textarea maxlength don't match upJavascript 长度和 textarea maxlength 不匹配
【发布时间】：2013-03-29 03:07:58
【问题描述】：

问题：我有一个 javascript 函数，它计算文本区域中的字符数并将其输出到我的控制台。我的 textarea 上也设置了 maxlength。
问题是，有时我的 sum 和 textarea 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/

【问题讨论】：

试试change事件...
我做到了，它甚至不会改变价值..
看看这个 - jsfiddle.net/RnTHJ/9 。工作正常
@Sann：我能够打破它..有没有办法做到这一点？ :D
您的浏览器一定有问题。它对我来说很棒。

标签： javascript jquery html textarea

【解决方案1】：

您可能会触发如此多的“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/

【讨论】：

感谢它看起来像一个有趣的解决方案，但我仍然可以“混淆” sum 变量..
真的吗？到目前为止，我还无法打破它。尝试将 100 毫秒的时间增加一点。
不，它坏了。按回车键和退格键几次.. :)
啊，回车键。我看到有些浏览器将其视为两个字符，这是不一致的。换行符会影响您的字符数。
见stackoverflow.com/questions/11675997/… 和stackoverflow.com/questions/10030921/…。如果有换行符，您的 javascript .length 将遇到匹配 maxlength 检查的问题。

【解决方案2】：

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

最好是using the change event。

编辑：

如何使用 keydown 而不是每次都从输入长度重新分配。 (fiddle)

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...如果可能的话，您可以检查所有的字母和数字。退格键使用其键码显式检查。

【讨论】：

不，这有同样的问题（对我来说）。尝试按回车键很多次...（Win7上的Chrome）
按键不更新退格。更改不会更新，直到您单击/标签远离文本区域（onblur）。
@jszobody 是的，但是按键会在第一个字符按下时更新。
hm.. 但最后总和仍然包含一个数字，并且 textarea 正在阻止输入。还有其他方法吗？

【解决方案3】：

我知道这是一个旧线程，但根据我的经验，它不匹配的唯一原因是换行符。如果您在实际计数为两个字符 (\r\n) 的字段中输入/返回，而不是像大多数人所期望的那样仅是一个 (\n)。也许这就是您遇到的计数不匹配的问题？

【讨论】：