用于立即更改输入的 jQuery 事件处理程序答案

【问题标题】：jQuery Event Handler for immediate changes in inputs用于立即更改输入的 jQuery 事件处理程序
【发布时间】：2011-05-12 19:01:39
【问题描述】：

我正在寻找一个 (jQuery) 事件处理程序，它在 input[type="text"] 值更改后立即执行一个函数。 .change jQuery 事件处理程序在 input[type="text"] 失去焦点后执行函数（这可能适用于另一种情况）。

keypress / up / down 仅在用户在输入中输入内容时起作用（而不是在我动态操作时）。

有什么解决办法吗？

【问题讨论】：

输入是什么类型的？类型=文本？您打算支持哪些浏览器？
是的。 input[type="text"] （使用 type="range" 等会更棒，但 text 就足够了）。基本上每个现代浏览器（不是 IE6）。
当我动态操作它时你是什么意思？当您使用 .val() 更改值时？

标签： javascript jquery forms event-handling onchange

【解决方案1】：

在这种情况下我会做的一件事是将同一个处理程序绑定到一堆事件。

$('input').bind("change blur keyup mouseup", function() {
    $(this).css("color", "red"); // or whatever you want to happen
});

见http://api.jquery.com/bind/

【讨论】：

谢谢。但这真的不是我想要的。

【解决方案2】：

首先，我将修改 JQuery 更改事件以触发，即使您使用 val 函数动态更改它也是如此。为什么这不是 JQuery 中的默认行为对我来说真的没有意义。这是执行此操作的代码：

//Store the old val function
$.fn.custom_oldVal = $.fn.val;

//Update the val function to fire the change event where appropriate:
$.fn.val = function(value) {
    if(value == null || value == undefined){
        return this.custom_oldVal();
    } else {
        //Only call onchange if the value has changed
        if(value == this.custom_oldVal()){
            return this;//Return this object for chain processing
        } else {
            return this.custom_oldVal(value).change();
        }
    }
}

如果您需要它在其他时间触发，请按照 jimbojw 提到的过程添加这些事件侦听器。

【讨论】：

哇。谢谢，这太棒了！
这不是默认设置，因为它可能会在更改某些内容时创建令人讨厌的依赖链甚至循环。如果你非常需要这个，最好使用 Angular 或 Knockout 之类的东西。