Question

我完全理解使用.bind('keyup', function() { });计算textarea或input中的字符的方法，但我尝试执行keydown功能，以便您可以看到结果当你输入键盘时，在键盘上按住一个字母并且计数在你释放钥匙之前不会更新。

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/

Answer 1

我建议，即使在关键被按下时暂时错误，也可以更准确地计算密钥，因为在实践中我认为用户通常不需要重复相同的字符，所以他们不倾向于按住一个键，它保持代码简单。但如果你想要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/

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

Answer 2

当用户在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/

您还可以将bindidng“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/

使用keyup来计算jQuery中的字符

2 个答案: