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

Posted 2023-02-22

【中文标题】如何使用 jQuery 实现 <input type="text"> 的 onchange？

【英文标题】：How do I implement onchange of <input type="text"> with jQuery?

【发布时间】：2010-11-29 10:06:37

【问题描述】：

<select> 有这个 API。 <input>呢？

【参考方案1】：

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

请注意，仅当输入元素失去焦点时才会触发更改。 每当文本框更新时，还会触发输入事件 无需失去焦点。与关键事件不同，它也适用于 粘贴/拖动文本。

（见documentation。）

这非常有用，值得将其放入答案中。目前 (v1.8*?) jquery 中没有 .input() 方便的 fn，所以这样做的方法是

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

【讨论】：

特别是IE

因为你可以绑定到多个事件 $('form').on('change input', function); 为我做了诀窍。谢谢。

@Norris。当元素更改（第一次）并失去焦点（第二次）时，这可能会触发两次。这在很多情况下都不是问题，但仍然值得注意。

在 IE9 测试，退格不会被触发

注意，这将在每次输入更改时触发（这可能是您正在寻找的内容）。但是，如果您正在寻找像“完成更改”这样的事件，here's a great example。

【参考方案2】：

您可以使用.change()

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

但是，此事件只会在选择器失去焦点时触发，因此您需要单击其他位置才能执行此操作。

如果这不太适合您，您可以使用其他 jQuery events，例如 keyup、keydown 或 keypress - 取决于您想要的确切效果。

【讨论】：

不幸的是，这不适用于隐藏输入。当需要对隐藏输入进行 onchange 时，一种可能的解决方案是： (with css)..

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

很棒的评论@pimvdb。我使用了这个，并将它变成了这个问题的答案。

我正在尝试这个，并且刚刚了解到该事件仅在满足两个条件时触发：1）值更改；和 2）模糊，我想知道许多人对 change() 的期望是否由 keyup() 更好地处理？

由于IE9不支持change，你可以使用focusout进行同样的操作

【参考方案3】：

我建议使用如下的 keyup 事件：

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

有几种方法可以达到相同的结果，所以我想这取决于偏好，并且取决于您希望它如何准确地工作。

更新：这仅适用于手动输入而不是复制和粘贴。

对于复制和粘贴，我建议如下：

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

【讨论】：

我绝对推荐这个用于文本输入！

可以在不触发 keyup 的情况下更改输入元素的内容。例如，您可以使用鼠标粘贴文本。

另外，似乎仍需要更改才能捕获复选框

我从来不知道“输入”功能。这就是我要使用的，IMO，因为它支持手动文本输入以及剪切/粘贴文本。

【参考方案4】：

这是我使用的代码：

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

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


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

这非常有效，尤其是与jqGrid 控件配对时。您只需在文本框中输入并立即在您的jqGrid 中查看结果。

【参考方案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 上绑定/取消绑定此事件。

【讨论】：

是否可以让您的代码像这样工作：$('body').on('inputchange', 'input', function() console.log(this.value) );？或者不，正如这里提到的：github.com/EightMedia/hammer.js/pull/98 ?

编写和启动这样的代码是一种对性能影响极大的疯狂行为。

@ŁukaszLech 请告诉我。但是如果你像我提到的那样点击焦点/模糊事件，间隔只会暂时运行。当然，即使是 1988 年的英特尔 386 也可以处理单个间隔？

【参考方案6】：

<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 关键字来访问整个元素，这样您就可以使用该元素做任何您需要的事情。

【参考方案7】：

即使是动态/Ajax 调用，以下内容也可以使用。

脚本：

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

html，

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

我希望这个工作代码能帮助那些试图动态访问/Ajax 调用的人...

【参考方案8】：

如果您想在键入时触发事件，请使用以下命令：

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

如果您想在离开输入字段时触发事件，请使用以下命令：

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

【讨论】：

由于某种原因这对我不起作用，但确实如此：$(document).on('change', 'input[name=myInput]', function() ... );

@Stefan，您示例中的代码称为事件委托。您的输入字段必须在页面初始化后添加，这就是我的代码不适合您的原因。

【参考方案9】：

$("input").keyup(function () 
    alert("Changed!");
);

【参考方案10】：

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

【讨论】：

这个选项的问题是只有在失去输入焦点的情况下才有效

这仍然适用于某些情况。

【参考方案11】：

您可以简单地使用 id

$("#your_id").on("change",function() 
    alert(this.value);
);

【讨论】：

这不会对现有答案增加太多。

【参考方案12】：

您可以通过不同的方式执行此操作，keyup 就是其中之一。但我在下面给出改变的例子。

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

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

【参考方案13】：

这对我有用。如果单击名称为 fieldA 的字段或输入任何键，则会更新 ID 为 fieldB 的字段。

jQuery("input[name='fieldA']").on("input", function() 
    jQuery('#fieldB').val(jQuery(this).val());
);

【参考方案14】：

你可以使用.keypress()。

以 HTML 为例：

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

事件处理程序可以绑定到输入字段：

$("#target").keypress(function() 
  alert("Handler for .keypress() called.");
);

我完全同意安迪的观点；一切都取决于您希望它如何工作。

【讨论】：

这不适用于复制/粘贴操作。如果通过鼠标单击粘贴文本，则不会触发任何事件。