为什么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 );
});

但柜台只是＆＃34;更新＆＃34;当我在textarea外面点击时。这是为什么？我希望计数器能够在我写作时动态更新。

Answer 1

这是变更事件的已知行为。在元素失去焦点之前，它不会触发。 From the docs:

  

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

我会将脚本绑定到keyup（您可以使用其他键事件，但在此上下文中up最有意义）：

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

Answer 2

尝试使用keyup事件代替更改。看到它的实际应用：http://jsfiddle.net/ren4A/1/

Answer 3

尝试.on（'keyup'）或.on（'keypress'）或.on（'keydown'）

Answer 4

$('input#myId').bind('input', function() {
  //some code
});

它允许检测keyup事件，用鼠标粘贴数据...