按键上的Javascript事件,但在输入字符后

时间:2012-07-09 20:52:18

标签: javascript jquery keyboard

所以我正在对文本字段进行字符计数。我需要更新按键上的字符数(不是键盘)。问题是,使用jquery的.keydown()方法,它会在输入字符之前刷新计数器,因此计数器始终是实际计数后面的1键。如何在按键时更改计数,但是等待输入字符?

谢谢!

3 个答案:

答案 0 :(得分:9)

请改用.keyup()。当钥匙被释放时触发,因此计数器将增加。

来自文档:

  

当用户释放密钥时,keyup事件将发送到元素   键盘。它可以附加到任何元素,但事件只是   发送到有焦点的元素。

您可以像使用其他任何事件一样使用它:

$('input').keyup(function(e) {
    var text = $(this).val();
    console.log(text.length);
});

确保计算文本框中的字符数(如上例所示),不是按下的键数。例如,按 Ctrl + C 将导致计算两个额外字符,但实际上没有输入任何字符。


如果您正在使用jQuery 1.7+,请使用.on()

$('input').on('keyup', function(e) {
    // Do your magic
});

答案 1 :(得分:9)

setTimeout似乎在这里工作:

$('input').keydown(function(e) {
    var $this = $(this);
    setTimeout(function() {
        var text = $this.val();
        console.log(text.length);
    }, 0);
});

答案 2 :(得分:2)

一个简单的例子:

var MAX_CHARACTERS = 60;
$('textarea').bind('keyup keydown', function() {
    var $element = $(this);
    if($element.val().length > MAX_CHARACTERS) {
        $element.val($element.val().substring(0, MAX_CHARACTERS));
    }
    $('.counter').val(MAX_CHARACTERS - $element.val().length);
});

demo