我如何使用jQuery实现<input type="text">的onchange事件？

Question

<select>具有此API。那么<input>呢？

- omg

Answer 1

正如 @pimvdb 在他的评论中所说，

请注意，只有在输入元素失去焦点时才会触发更改事件。 还有一个输入事件，每当文本框更新时就会触发它， 而不需要失去焦点。与按键事件不同，它也适用于 粘贴/拖动文本。

(请参阅documentation.)

这非常有用，值得将其放在答案中。目前（v1.8*？）jQuery中没有 .input() 方便函数，因此实现方式是：

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

- iPadDeveloper2011

---

特别地，IE版本低于9完全不支持该功能。 - dlo

因为你可以绑定多个事件，所以 $('form').on('change input', function); 对我很有帮助。谢谢。 - pyronaur

@Norris. 当元素被更改（第一次）并失去焦点（第二次）时，它可能会触发两次。这对许多目的来说不是问题，但仍值得注意。 - iPadDeveloper2011

在IE9上测试，退格键不会触发。 - JaskeyLam

请注意，这将触发每次输入更改（这可能是您要寻找的内容）。但是，如果您正在寻找类似于“完成更改时”的事件，这是一个很好的例子。 - Trevor Nestman

谢谢，这对我有用。 - Joukhar

Answer 2

你可以使用 .change()

$('input[name=myInput]').change(function() { ... });

然而，此事件仅在选择器失去焦点时触发，因此您需要单击其他位置才能使其起作用。

如果这对您来说不太合适，您可以使用其他jQuery事件，例如keyup、keydown或keypress，具体取决于您想要的确切效果。

- Greg

---

不幸的是，这对于隐藏输入框无效。当需要在隐藏输入框上使用 onchange 时，可能的解决方案是：<input type='text' style='display:none' />（使用 CSS）。 - NickGreen

请注意，change事件只会在输入框失去焦点时触发。还有一个input事件，它会在文本框更新时触发，而无需失去焦点。与按键事件不同的是，它也适用于粘贴/拖动文本。 - pimvdb

很棒的评论 @pimvdb。我使用了它，并将其转化为这个问题的答案。 - iPadDeveloper2011

当我尝试这个时，我刚学到只有在满足两个条件时事件才会触发：1）值改变；和2）失焦。我想知道许多人对change()的期望是否更好地由keyup()处理？ - TARKUS

由于IE9不支持change，您可以使用focusout来实现相同的行为。 - Soma

失去焦点的注释帮助了我... - Andrew

Answer 3

我建议使用类似下面的keyup事件：

$('elementName').keyup(function() {
 alert("Key up detected");
});

有几种方法可以实现相同的结果，所以我猜这取决于个人喜好和具体需求。

更新：这只适用于手动输入而非复制粘贴。

对于复制粘贴，我建议使用以下方法：

$('elementName').on('input',function(e){
 // Code here
});

- Andrew

---

我强烈推荐这个用于文本输入！ - Vercas

输入框的内容可以在不触发“keyup”事件的情况下被修改。例如，你可以使用鼠标粘贴文本。 - celicni

此外，似乎仍需要更改以捕获复选框。 - turbo2oh

我之前不知道有 'input' 函数。在我看来，这是一个好选择，因为它支持手动输入和剪贴板粘贴。 - clamum

Answer 4

以下是我使用的代码：

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

这个方案很不错，尤其是与jqGrid控件搭配使用时。您只需在文本框中输入内容，就可以立即在您的jqGrid中查看结果。

这个方案非常好用，特别是和jqGrid控件搭配使用。您只需在文本框中输入内容，就可以立刻在jqGrid中查看结果。

- Mike Gledhill

Answer 5

做到这一点只有一个可靠的方法，那就是在一段时间间隔内获取值并将其与缓存的值进行比较。

之所以这是唯一的方法，是因为有多种方式可以使用各种输入（键盘、鼠标、粘贴、浏览器历史记录、语音输入等）来更改输入字段，在跨浏览器环境中您永远无法使用标准事件检测所有这些方式。

幸运的是，由于jQuery中的事件基础结构，很容易添加自己的inputchange事件。我在这里这样做了：

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

使用方式如下：$('input').on('inputchange', function() { console.log(this.value) });

这里有一个演示：http://jsfiddle.net/LGAWY/

如果你担心存在多个间隔，你可以在 focus/blur 上绑定/解绑此事件。

- David Hellsing

---

你能否让你的代码像这样工作：$('body').on('inputchange', 'input', function() { console.log(this.value) });？或者不行，就像在这里提到的一样：https://github.com/EightMedia/hammer.js/pull/98？ - TheFrost

编写和发布这样一段代码是一种极具性能影响力的疯狂行为。 - Danubian Sailor

@ŁukaszLech请告诉我相关信息，但如果你也像我提到的一样碰到了聚焦/失焦事件，那么该间隔只会暂时运行。确定吗？即使是1988年的英特尔386处理器也可以处理单个间隔？ - David Hellsing

Answer 6

如果您想在输入时触发事件，请使用以下代码：

$('input[name=myInput]').on('keyup', function() { ... });

如果您希望在离开输入框时触发事件，请使用以下代码：

$('input[name=myInput]').on('change', function() { ... });

- Usman Ahmed

---

由于某些原因，这对我不起作用，但是这个可以：$(document).on('change', 'input[name=myInput]', function() { ... }); - Stefan

@Stefan，你示例中的代码被称为事件委托。你的输入字段必须在页面初始化后添加，这就是为什么我的代码对你不起作用的原因。 - Usman Ahmed

Answer 7

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

我建议使用this关键字，以便访问整个元素，从而使您能够对该元素进行所需的所有操作。

- NoWar

Answer 8

以下内容即使在动态/Ajax调用时也可以工作。

脚本：

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

HTML，

<input class="addressCls" type="text" name="address" value="" required/>

我希望这段可用代码能够帮助正在尝试访问动态/Ajax调用的人...

- Vinith

Answer 9

你可以用不同的方法来做到这一点，其中之一是使用 keyup。但我会在下面提供使用 onchange 的示例。

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

注意：将input[name="vat_id"]替换为您的输入ID或名称。

- Rokan Nashp

Answer 10

$("input").change(function () {
    alert("Changed!");
});

- Georg Schölly

---

该选项的问题在于只有在失去输入焦点时才起作用。 - Yises

那仍然适用于某些情况。 - James Drinkard