javascript - 为 HTML 输入元素中的每个实际更改触发一次处理程序

Question

我想针对输入字段中的每个实际更改 触发事件处理程序一次。例如，要验证(按按键)输入的信用卡号(更改必须在每次更改时进行，因此去抖动/节流不是答案)。

我不能使用 input单独使用，因为 IE9 不会从退格键或剪切/删除中触发此事件。

我不能单独使用 keyup，因为它不能处理鼠标的更改(例如粘贴)。

我不能使用 change，因为它只会在 blur 上触发。

我可以执行 $('input').bind('input keyup', handler) 但大多数时候这会触发两个单独的事件。假设处理程序很昂贵并且运行它两次是 Not Acceptable 。

我可以包装处理程序，使其仅在当前值与上次检查的值不同时才运行，但有更好的方法吗？

Answer 1

检查最后一次输入所做的就是您需要做的。

这是您可以用来存储最后一个值的一种方法。

function handler(){ 
    var tb = jQuery(this);
    var currentValue = tb.val();
    if (tb.data("lastInput") !== currentValue) {
        tb.data("lastInput", currentValue);
        console.log("The current value is " + currentValue);
    } 
}
$('input').bind('input keyup', handler);

jsFiddle

如果您真的不想在您的函数中使用该逻辑，您总是可以扩展 jQuery。这是一堆更多的代码，但只有一种方法。

(function(){
    $.fn.oneinput = function(callback) {        
        function testInput(){ 
            var tb = jQuery(this);
            var currentValue = tb.val();
            if (tb.data("lastInput") !== currentValue ) {
                tb.data("lastInput",currentValue );
                if(callback) { 
                    callback.call(this) 
                };
            }
            return this;
        }    
        jQuery(this).bind("keyup input", testInput);
    };
}(jQuery));

$('input').oneinput( function(){ console.log(this.value); });
​

jsfiddle