鍵盤上的Javascript事件，但是在輸入字符之后

Question

所以我正在對文本字段進行字符計數。 我需要在按鍵（而不是按鍵）上更新字符計數。 問題在於，使用jquery的.keydown()方法，它會在輸入字符之前刷新計數器，因此該計數器始終比實際計數落后1個按鍵。 如何在按鍵時更改計數，但等待輸入字符？

謝謝！

Answer 1

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

Answer 2

setTimeout似乎在這里工作：

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

Answer 3

一個簡單的例子：

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

演示