1

我完全理解用于计算 a或.bind('keyup', function() { });中的字符的方法，但我尝试了一个函数，以便您可以在键入时看到结果，对战，按住键盘上的一个字母，直到释放密钥之后。textareainputkeydown

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

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

我目前的方法有缺陷：

  • 当您全选并点击删除时，计数会混乱。
  • 需要 +1 才能显示实时取景

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

4

2 回答 2

5

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

“它需要 +1 才能显示实时视图”

我假设您意识到这是因为在处理 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/

请注意，用户可以在完全不触发键盘事件的情况下添加或删除文本（通过拖放或剪切/粘贴）。

于 2013-03-24T03:36:42.687 回答
0

当用户在 textarea 中选择文本时绑定“keyup”事件：

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

input.bind('keydown', function(e) {
    $('span#character-count').text(0);
    input.select( function () {
        input.bind('keyup', function(e) {
            $('span#character-count').text(input.val().length);
        })
    });
    $('span#character-count').text(input.val().length);
});

jsfiddle：http: //jsfiddle.net/glenswift/SEBLD/1/

您还可以结合绑定“keydown”和“keyup”：

var input = $('textarea#input'),
    firstInput = true;
$('span#character-count').text(input.val().length);
input.bind('keydown, keyup', function(e) {
    $('span#character-count').text(0);
    $('span#character-count').text(input.val().length);
});

jsfiddle：http: //jsfiddle.net/glenswift/L6DR8/1/

于 2013-03-24T03:17:14.280 回答