jquery - 在 jQuery 中使用 keyup 来计算字符数

Question

我完全理解使用 .bind('keyup', function() { }); 计算 textarea 或 input< 中的字符的方法，但我尝试执行 keydown 功能，这样您就可以在打字时看到结果，而不是按住键盘上的字母，直到您输入之后计数才会更新已释放 key 。

var input = $('textarea#input');
$('span#character-count').text(input.val().length);

input.bind('keydown', function() {
    $('span#character-count').text(input.val().length + 1);
});

我当前的方法有缺陷:

• 当您选择全部并点击删除时，计数就会困惑。
• 需要 +1 才能显示实时 View

jsFiddle: http://jsfiddle.net/rdvR7/

Answer 1

我建议对按键的准确计数更好，即使在按住某个键时暂时错误，因为在实践中我认为用户通常不需要重复相同的字符，因此他们不会倾向于按住一个键，可以使代码保持简单。但如果你想要按键...

"it requires +1 to show a live view"

我假设您意识到这是因为在处理 keydown 事件期间字段的当前值不包括与击键相关的更改 - 如果包含，您将无法取消 keydown 事件而不必撤消改变。

解决这个问题的一个简单方法是延迟更新计数，直到 keydown 事件完成之后，也许像这样:

var input = $('textarea#input'),
    count = $('span#character-count').text(input.val().length);

input.bind('keydown', function() {
    setTimeout(function() {
       count.text(input.val().length);
    },4);
});

更新的演示:http://jsfiddle.net/nnnnnn/rdvR7/2/

请注意，用户可以添加或删除文本，而无需触发键盘事件(通过拖放或剪切/粘贴)。