正在检测jQuery中的输入更改

Detecting input change in jQuery?

本文关键字：输入 检测 jQuery      更新时间：2023-09-26

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

在我的情况下，我需要在输入值更改后立即调用服务（检查值是否有效）。我怎样才能做到这一点？

更新以供澄清和示例

示例：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事件

对于较旧的浏览器，使用keyup事件（一旦释放键盘上的一个键，就会触发该事件，该事件可能会给出一种误报，因为当释放"w"时，输入值会发生变化，keyup事件也会触发，但当释放"shift"键时，keyup事件会触发，但是输入没有发生变化。)。此外，如果用户右键单击并从上下文菜单粘贴，此方法不会启动：

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

方法3。计时器（setInterval或setTimeout）

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

如果你有HTML5:

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

否则，您需要检查所有这些事件，这些事件可能指示输入元素的值发生了更改：

  • onchange
  • onkeyup（而不是作为输入值的keydown或keypress中还没有新的击键）
  • onpaste（支持时）

也许：

  • onmouseup（我不确定这个）

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

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

每当输入的文本发生更改时，就会触发此项。

IE9+和其他浏览器支持。

试试这里的jsFiddle直播吧。

正如其他人已经建议的那样，您的解决方案是探查多个事件
做这项工作的插件经常监听以下事件：

$input.on（'change key-down keypress key-up mouse-down click mouse-up'，handler）

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

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

//。元素失去焦点时会触发模糊

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

//手动触发使用：

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

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

有jQuery事件，如keyup和keypress，您可以将其用于输入HTML元素。您还可以使用blur（）事件。

这涵盖了使用jQuery 1.7及以上版本对输入的每一次更改：

$(".inputElement").on("input", null, null, callbackFunction);
相关文章：