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

【问题标题】：Why does jQuery.change() only trigger when I leave the element?为什么 jQuery.change() 只在我离开元素时触发？
【发布时间】：2012-03-05 13:55:41
【问题描述】：

我有一个 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 );
});

但是当我在文本区域之外单击时，计数器只会“更新”。这是为什么？我希望计数器在我写作时即时更新。

【问题讨论】：

【解决方案1】：

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

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

我会将脚本绑定到 keyup（您可以使用其他键事件，但 up 在这种情况下最有意义）：

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

【讨论】：

【解决方案2】：

尝试使用keyup 事件而不是更改。实际操作：http://jsfiddle.net/ren4A/1/

【讨论】：

【解决方案3】：

试试 .on('keyup') 或 .on('keypress') 或 .on('keydown')

【讨论】：

【解决方案4】：

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

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

【讨论】：