在jQuery中检测输入更改？

在.change上使用jQuery input时，仅当输入失去焦点时才会触发该事件。

对于我来说，我需要在输入值已更改。我该怎么办？

什么样的输入？文本框？复选框？无线电？文本区域？让我们看看您到目前为止提出了什么

抱歉，它是文本类型的输入。就像我说的，我已经尝试过更改，但这并不能激发我所需的方式（对于输入文本中的每个更改）。我也尝试过keydown，但是要使它正常工作，无论输入是否为“脏”，我都必须保持跟踪。

如果他们按下某个键，那么它将有99％的时间发生变化，您始终可以检查事件处理程序中没有的键。

#1 楼

更新以得到澄清和示例

示例：http://jsfiddle.net/pxfunc/5kpeJ/

方法1. input事件

现代浏览器使用input事件。当用户在文本字段中键入，粘贴，撤消时，基本上在任何时候将值从一个值更改为另一个值时，都会触发此事件。

在jQuery中，像这样

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

从jQuery 1.7开始，用bind替换on：

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

方法2。对于较旧的浏览器，请使用keyup事件（一旦释放键盘上的某个键，就会触发该事件，该事件可能会产生某种误报，因为释放“ w”时会更改输入值，并且会触发keyup事件释放“ Shift”键时，会触发keyup事件，但未对输入进行任何更改。）如果用户右键单击并从上下文菜单中粘贴，此方法也不会触发：

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

方法3.计时器（keyup或setInterval）

要解决setTimeout的局限性，您可以设置一个计时器来定期检查输入的值以确定值的变化。您可以使用keyup或setInterval进行此计时器检查。请参阅以下SO问题的标记答案：jQuery文本框更改事件，或查看小提琴以获取使用setTimeout和focus事件启动和停止特定输入字段的计时器的工作示例

您能否进一步说明此解决方案？如何获得当前值？我如何才能使其仅在对当前值进行更改时才能运行？

– Banshee
2011年6月27日13:51

输入事件？ jQuery中没有输入事件（尚未）... stackoverflow.com/q/11189136/104380

– vsync
13年2月24日在18:52

对于方法2，我通常同时绑定到keyup和change。这样，在没有按键的情况下发生输入（例如粘贴）的情况下，当输入失去焦点时，它将至少触发事件。

–rspeed
13年4月18日在8:37

“输入”事件的文档：whatwg.org/specs/web-apps/current-work/multipage/…

– jackocnr
13-10-14在23:28

@AdiDarachi MutationObserver将跟踪对DOM元素的更改。但是，用户在输入字段中更改数据不会触发MutationObserver更改...我设置了一个测试用例，只有将JS代码更改为innerText或value属性（模拟用户输入）才会触发MutationObserver事件jsfiddle.net/ pxfunc / 04chgpws / 1（请参阅console.log中的MutationObserver事件日志记录）。您可以查看其他测试用例吗？

–MikeM
16年7月27日在18:11

#2 楼

如果您拥有HTML5：

oninput（仅在实际发生更改时触发，但立即执行）

否则，您需要检查所有可能表明输入元素的值发生更改的事件：

onchange

onkeyup（不是keydown或keypress作为输入的值尚无新的按键）

onpaste（受支持时）

，也许：

onmouseup（我不确定这一点）

我测试中的@naomik适用于复选框输入； IE / Edge除外。可能还会出现其他一些例外，但是将onchange用于那些输入类型（IMHO）会更聪明。

–地狱宝贝
17年7月7日在14:48

#3 楼

使用HTML5且不使用jQuery，您可以使用input事件：

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

每次输入文本更改时都会触发。

支持在IE9 +和其他浏览器中。

在jsFiddle中尝试在此处进行试用。

另外，当用户从输入中删除字符时（例如，通过按Backspace或Delete或使用“剪切”操作），IE 9不会触发输入事件。

–xcatliu
16年5月26日在5:15

“更改”仅在模糊时触发，而不在文本更改时触发。使用“输入”事件来检测文本更改。

–Dermot Doherty
17年1月27日，下午3:13

#4 楼

正如其他人已经建议的那样，您的解决方案是嗅探多个事件。
执行此工作的插件通常会侦听以下事件：

 $ input.on（“更改keydown keypress keyup mousedown单击mouseup”，处理程序）；

如果您认为合适，可以添加focus，blur和其他事件。
我建议不要超出侦听事件的范围，因为它会将更多的程序加载到浏览器内存中，以根据用户的行为执行。具有JavaScript的元素（例如通过jQuery .val()方法）将不会触发上述任何事件。
（参考：https://api.jquery.com/change/）。

我还建议添加焦点，以避免自动完成问题

– Binar
16年5月5日，11：29

我懂了。我搜索了一下，但焦点集中似乎仅受IE支持，部分受Chrome支持，对吗？

– yodabar
16年1月11日，0：23

就像一个温和的补充一样，要从jQuery触发事件，您可以在.val（）之后调用相应的动作，例如对于输入字段上的change事件，您可以执行以下操作... $（'＃element'）。 val（任何）.change（）

– SourceVisor
16-09-22在4:15

#5 楼

如果您希望元素中发生任何更改时都触发该事件，则可以使用keyup事件。

好吧，但这与按键不大相同吗？我自己必须检查输入是否“脏”？

– Banshee
2011年6月23日18:37

@SnowJim如果您只想在输入实际发生更改时执行操作，则必须使用onchange或自己跟踪状态。 keydown不起作用，因为它会在更改输入状态之前触发。

– Alnitak
11年6月23日在18:47

@Alnitak exacly，这就是为什么我在这里问这个问题。 onchange不起作用，仅在离开输入时才抛出。

– Banshee
2011年6月23日20:13在

当然，房间里的大象是可以移动的。可以肯定的是，那里没有键盘或鼠标事件会很有用。：p

–问设计师
14年6月29日在11:29

@Askdesigners Keyup / down事件在移动设备上仍应以相同的方式工作。

–活动
2014年6月30日7:36

#6 楼

// .blur在元素失去焦点时触发

$('#target').blur(function() {
  alert($(this).val());
});

//要手动触发，请使用：

$('#target').blur();

就像我说的那样，.change仅当inout失去焦点并且值更改时才抛出。我需要在input（text）更改时（输入中的文本更改时）尽快获得偶数。仅当输入失去焦点时才会触发模糊。

– Banshee
11年6月23日在18:33

#7 楼

有一些jQuery事件，例如keyup和keypress，可以与输入HTML元素一起使用。
您还可以使用blur（）事件。

您不能在按键事件期间可靠地检查输入的值，因为被按下的键尚未更改该值。

– Alnitak
2011年6月23日18:40

#8 楼

这涵盖了使用jQuery 1.7及更高版本对输入的所有更改：

$(".inputElement").on("input", null, null, callbackFunction);

编程黑洞网