按下键时,jQuery代码触发两次bind('keyup change')

Question

我有一个数字输入,应该在每次更改时触发jQuery.为此,我做了一个$('#id').bind('keyup change', ...);,在任何键盘或鼠标控制器更改时触发.

这适用于鼠标点击(触发器change)和键入数字(触发器keyup).但对于光标键,它会触发change和keyup.如何才能使它在所有情况下只触发一次？

这是一个显示问题的示例:http://jsfiddle.net/jSjkE/

Answer 1

你对这个onchange事件有一个错误的概念.

它不是当元素的值的变化,相反,它激发只有在两个条件得到满足火:

• 元素模糊(失去焦点);
• 元素具有与获得焦点时不同的值.

注意:以上是针对类型的输入text.对于类型checkbox/ radio它会在其checked属性更改时立即触发,并在select其所选选项发生更改时立即触发.

onchange按Chrome的input type="number"向上/向下箭头时,事件(可能是错误的)会触发.你应该不依赖于它,因为很多其他的主流浏览器甚至没有数量输入的实现,又可能不具有这样的行为.

相反,当您使用HTML5时,您应该依赖oninputHTML5事件,该事件会在元素值更新时触发.

$(function() {
    var count = 0;
    $('#num').on('input', function(e) {
        console.log('update ' + (++count) + ' Value: ' + this.value);    
    });
});?

小提琴

编辑:

对于较旧(和非HTML5)的浏览器,您可以将该keyup事件用作后备:

$('#num').on('input keyup', function(e) {

对非HTML5浏览器执行此操作的最有弹性的方法是setInterval不断检查元素的值是否已更改,keyup如果您选择一些文本并将其拖动到文本框中则不会触发 - 您可以尝试.on('input keyup mouseup',但之后它就会'如果用户使用浏览器的编辑>粘贴菜单,则触发.

EDIT2:

如果您不想使用setInterval,可以在.on/中放置一个巨大的事件映射,.bind并通过将当前值存储.data()在元素中来检查值是否已更改:

var count = 0;
$('#num').on('input keyup change', function(e) {
    if (this.value == $(this).data('curr_val'))
        return false;
    $(this).data('curr_val', this.value);

    console.log('update ' + (++count) + ' Value: ' + this.value);
});

小提琴

我已将onchange事件添加到事件映射中,因此即使oninput并且onkeyup失败(使用浏览器菜单粘贴数据的非html5浏览器),onchange当元素失去焦点时,事件仍将触发.

这是带注释的最终编辑,setInterval并.data()避免使用全局变量,因此您可以选择使用哪个回退:

$(function() {
    var $num = $('#num');
    $num.data('curr_val', $num.val()); //sets initial value

    var count = 0;
    setInterval(function(){
        if ($num.data('curr_val') == $num.val()) //if it still has same value
            return false; //returns false
        $num.data('curr_val', $num.val()); //if val is !=, updates it and
        //do your stuff
        console.log('update ' + (++count) + ' Value: ' + $num.val());
    }, 100); //100 = interval in miliseconds
});

小提琴