JQuery改变事件在失去焦点前不会触发

Question

我使用 change(handler) 来监听 textarea 的改变事件，但是只有在 textarea 失去焦点时才会收到事件，而我希望在值改变的同时立即收到事件。

$("#text_object").change(listener);
function listener(dom){
alert("I'm not getting here before the textarea loses focus");
}

- Dude Dawg

---

听起来你想要使用 keydown 或 keyup。 - Andrew Whitaker

我尝试了keyup：http://stackoverflow.com/questions/10269571/form-event-incompatibilities-between-browsers-how-to-address - Dude Dawg

Answer 1

根据这里的正确答案 Javascript change event on input element fires on only losing focus，你应该像这样做。

$('#name').on('change textInput input', function () {
       
});

然而，我发现同时具有textInput和input事件可能会导致事件触发两次，这是不希望看到的，所以只需执行

$('#name').on('change input', function () { ...

- Slim Fadi

---

运行完美！ - Peter

完美运作！ - undefined

Answer 2

不幸的是，浏览器仅在字段失焦时才能识别更改，因此您可能需要尝试附加一个keyup监听器。不幸的是，这不是最优雅的解决方案。

详情请参见http://api.jquery.com/keyup/。

- Arno

---

使用 keyup 时，您可以使用鼠标粘贴文本而不触发事件。 - Oscar

由于这个答案受到了高度评价并被接受：请务必查看Slim Fadi的回答，其中提到了 input 事件，它恰好可以满足你的要求。 - jlh

Answer 3

你可以做到这一点。只需确保给文本区域添加一个ID标签即可。

$(document).ready(function(){
        $('.addtitle').keyup(function(event) {
            if(event.keyCode==13) { 

}
});
});

在我的情况下，我会在按下回车键时触发该函数（就像Facebook的函数一样）。

编辑：如果页面上有多个文本区域，您应该这样做：

$(document).ready(function(){
        $('textarea[name=mynamevalue]').keyup(function(event) {
            if(event.keyCode==13) { 

}
});
});

- DJ_Plus

Answer 4

这是我所做的事情：

/* Get the current value of the input and save it 
 *  in a data attribute before any change is made to it */
$(document).on('keydown','input', function(){
   $(this).data('value',$(this).val());
});

/* Compare the values after the keyup event*/
$(document).on('keyup','input', function(){
  if($(this).data('value') != $(this).val()){
    console.log($(this).attr('name'));
  }
});

因此，“keydown”事件在“keypress”实际对其调用的元素进行任何修改之前被触发，“keyup”在触发后被触发。 因此，我在获取值之前和之后比较新值，然后如果有更改，我就执行必要的操作。 希望这可以帮助你。

- Arnold

Answer 5

你可以在输入框聚焦事件中使用setInterval()，并在失焦事件中清除此间隔，并且我认为这是通过自己捕获输入更改的好方法。

示例：

var myInterval;
$("#text_object").focus(function (event) {
    myInterval = setInterval(function () {            
        listener(event);
    }, 100);
});

$("#text_object").blur(function (event) {
    clearInterval(myInterval);
});

function listener(event){
    clearInterval(myInterval);

    alert("I'm not getting here before the textarea loses focus");
}

希望它有所帮助。

- Siavash Habil

Answer 6

您可以在每次按键后强制模糊，这样更改检查就会立即生效。

$myselector.on('change', function() { /*do something*/ });
$myselector.on('keyup', function() { $(this).blur(); $(this).focus(); });

- J T

---

或者你可以在键盘弹起时"做点什么"，但是对于响应键盘事件的问题是，通过鼠标右键点击框中的内容、剪切或粘贴内容都会改变框中的内容。除此之外，如果其他功能在失焦或聚焦时触发，这可能会产生其他副作用。 - Peter

Answer 7

我为你创建了这个，虽然不是最优雅的解决方案，但它能够工作。

JS:

<script>
$(document).ready(function (d) {

    /* set initial value to "" (empty string), and not null
       we're going to use this to check if the value of the current text field has been changed */
    val = '';

    setInterval(function () {
        if (val !== $('textarea[name="checktext"]').val()) {

            // Value is not the same, fire action
            alert('val is different');

            // Update the current value
            val = $('textarea[name="checktext"]').val();
        } else {
            // Val is the same as textarea value
        }

    }, 50);

});
</script>

HTML：

<textarea name="checktext"></textarea>

这个脚本只适用于特定的文本区域，您可以更改它或将val设置为文本输入数组。

我只是向您展示了它背后的思想，使用x毫秒的setInterval来检查文本输入的值是否与val的值或任何您想要使用的变量名相同。如果它们不匹配，则意味着它已被更改，如果它们匹配，则意味着没有更改。

希望您会发现这个有用。

然而，HTML5有解决方案

<script>
$(document).ready(function (d) {

    $('textarea[name="checktext"]').on('input', function () {
        alert('changed');
    });
});
</script>

- Emad Ha