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

Javascript event on keypress, but after the character has been entered

本文关键字:输入 字符 之后 事件 Javascript      更新时间:2023-09-26

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

谢谢!

setTimeout似乎在这里工作:

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

请改用.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
});

一个简单的例子:

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);
});

演示