检测jQuery中的输入变化？

Posted 2023-02-16

【中文标题】检测jQuery中的输入变化？

【英文标题】：Detecting input change in jQuery?

【发布时间】：2011-09-21 11:28:12

【问题描述】：

当在 input 上使用 jquery .change 时，该事件只会在输入失去焦点时触发

就我而言，我需要在输入值更改后立即调用服务（检查值是否有效）。我怎么能做到这一点？

【问题讨论】：

什么样的输入？文本框？复选框？收音机？文本区？让我们看看你到目前为止都想出了什么

对不起，它是文本类型的输入。正如我所说，我已经尝试过更改，但这并没有按照我需要的方式触发（对于输入中文本的每次更改）。我也尝试过 keydown 但要让它工作，我必须跟踪输入是否“脏”。

如果他们按下一个键，99% 的时间它都会改变，你总是可以检查事件处理程序中不会出现的键。

【参考方案1】：

更新说明和示例

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

方法一。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.
);

方法二。keyup事件

对于较旧的浏览器，使用keyup 事件（一旦键盘上的键被释放，该事件就会触发，该事件可能会产生一种误报，因为当“w”被释放时，输入值会改变，@ 987654335@ 事件触发，但当“shift”键被释放时keyup 事件触发但输入没有改变。）。如果用户从上下文菜单中右键单击并粘贴，此方法也不会触发：

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

方法3.定时器（setInterval或setTimeout）

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

【讨论】：

您能详细解释一下这个解决方案吗？如何获得当前值？我如何让它只在对当前值进行更改时运行？

输入事件？ jQuery 中没有输入事件（还）...***.com/q/11189136/104380

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

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

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

【参考方案2】：

如果你有 html5：

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

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

onchange onkeyup（

不是

keydown或keypress，因为输入的值还没有新的击键） onpaste（支持时）

也许：

onmouseup（这个我不确定）

【讨论】：

@naomik 来自我的测试，它适用于复选框输入；除了 IE/Edge。可能会出现其他一些例外情况，但对这些输入类型使用 onchange 会更聪明（恕我直言）。

【参考方案3】：

使用 HTML5 和不使用 jQuery，您可以使用 input event:

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

input.addEventListener('input', function()

    console.log('input changed to: ', input.value);
);

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

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

在jsFiddle here 中试用。

【讨论】：

附加，IE 9 does not fire an input event when the user deletes characters from an input (e.g. by pressing Backspace or Delete, or using the "Cut" operation).

'change' 仅在模糊时触发，而不是在文本更改时触发。使用 'input' 事件来检测文本变化。

【参考方案4】：

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

$input.on('change keydown keypress keyup mousedown click mouseup', handler);

如果您认为合适，您也可以添加focus、blur 和其他活动。 我建议不要超过要监听的事件，因为它会在浏览器内存中加载进一步的程序以根据用户的行为执行。

注意：请注意，使用 javascript 更改输入元素的值（例如通过 jQuery .val() 方法）不会触发上述任何事件。 （参考：https://api.jquery.com/change/）。

【讨论】：

我还建议添加 focusout 以避免自动完成问题

我明白了。我搜索了一下，好像只有 IE 和 Chrome 部分支持 focusout，对吗？

作为一个温和的补充，要从 jQuery 触发事件，您可以在 .val() 之后调用相应的操作，例如对于输入字段上的更改事件，您可以执行以下操作...@ 987654326@

【参考方案5】：

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

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

// 手动触发使用：

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

【讨论】：

.change 正如我所说的，仅在输入输出失去焦点并且值更改时才抛出，我需要在输入（文本）更改后立即获得输入改变）。模糊只会在输入失去焦点时触发。

【参考方案6】：

如果您希望在元素内发生更改时触发事件，那么您可以使用keyup 事件。

【讨论】：

好的，但这和keydown差不多吗？我必须自己检查输入是否“脏”？

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

@Alnitak exacly 这就是我在这里问这个问题的原因。 onchange 不起作用，是否仅在离开输入时抛出。

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

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

【参考方案7】：

有像 keyup 和 keypress 这样的 jQuery 事件，您可以将它们与输入 HTML 元素一起使用。 您还可以使用 blur() 事件。

【讨论】：

.change 正如我所说的，仅在输入输出失去焦点并且值更改时才抛出，我需要在输入（文本）更改后立即获得输入改变）。模糊只会在输入失去焦点时触发。

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

【参考方案8】：

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

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