为什么jQuery.change()仅在我离开元素时触发？

Question

我有一个textarea元素,我想打印在textarea上面写的字符数,因为我正在打字.HTML看起来像这样:

<p id="counter"></p>
<textarea id="text"></textarea>

和javascript:

jQuery( "#text" ).change( function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});

但是当我在textarea外面点击时,计数器只会"更新".这是为什么？我希望计数器能够在我写作时动态更新.

Answer 1

这是变更事件的已知行为.在元素失去焦点之前,它不会触发.来自文档:

更改事件在其值更改时发送到元素.此事件仅限于元素,框和元素.对于选择框,复选框和单选按钮,当用户使用鼠标进行选择时会立即触发事件,但对于其他元素类型,事件将延迟,直到元素失去焦点.

我会将脚本绑定到keyup(你可以使用其他键事件,但up在这个上下文中最有意义):

jQuery( "#text" ).keyup(function(){
    var numberOfChars = jQuery( "#text" ).val().length;
    jQuery( "#counter" ).html( numberOfChars );
});