Question

在我看到这个jsfiddle之前，我从来没有听说过jQuery中的一个名为input的事件。

你知道为什么它有效吗？它是keyup或其他什么的别名吗？

$(document).on('input', 'input:text', function() {});

Answer 1

通过用户界面更改元素的文本内容时发生。

它不是keyup的别名，因为即使密钥不起作用，keyup也会触发（例如：按下然后释放Control键将触发keyup事件）。

考虑它的好方法是这样的：它是一个在输入发生变化时触发的事件。这包括 - 但不限于 - 按下修改输入的键（例如，Ctrl本身不会触发事件，但Ctrl-V会粘贴一些文本），选择自动完成选项，Linux式中间点击粘贴，拖放以及许多其他内容。

有关详细信息，请参阅this页面和此答案的评论。

Answer 2

oninput事件对于跟踪输入字段更改非常有用。

然而，在IE版本中不支持它＆lt; 9.但旧的IE版本有自己的专有事件onpropertychange，其作用与oninput相同。

所以你可以这样使用它：

$(':input').on('input propertychange');

拥有完整的crossbrowser支持。

由于可以为任何属性更改触发属性更改，例如，已更改disabled属性，然后您希望包含此属性：

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

Answer 3

使用jQuery，以下内容完全相同：

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

但是，对于input事件，只有第二种模式似乎适用于我测试过的浏览器。

因此，您希望这可行，但它不会（至少目前）：

$(':text').input(function(){ doSomething(); });

同样，如果您想利用事件委派（例如，在#container添加到DOM之前在input.text上设置事件），应该会想到：

$('#container').on('input', ':text', function(){ doSomething(); });

可悲的是，它再次无法正常工作！

只有这种模式有效：

$(':text').on('input', function(){ doSomething(); });

使用更多当前信息进行编辑

我当然可以确认这种模式：

$('#container').on('input', ':text', function(){ doSomething(); });

现在，在所有“标准”浏览器中都可以使用。

Answer 4

正如claustrofob所说，IE9 +支持oninput。

However，“oninput事件在Internet Explorer 9中出错。只有在插入字符时才通过用户界面从文本字段中删除字符时不会触发。虽然Internet上支持onpropertychange事件资源管理器9，但与oninput事件类似，它也有错误，删除时不会触发。

由于可以通过多种方式删除字符（Backspace和Delete键，上下文菜单中的CTRL + X，剪切和删除命令），因此没有很好的解决方案来检测所有更改。如果通过上下文菜单的“删除”命令删除了字符，则无法在Internet Explorer 9的JavaScript中检测到修改。“

我有很好的结果绑定到输入和keyup（和keydown，如果你想在IE中触发，同时按住Backspace键）。

Answer 5

使用INPUT时要小心。此事件会在IE 11中的焦点和模糊时触发。但是在其他浏览器中更改时会触发此事件。

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Answer 6

我认为'input'在这里的工作方式与DOM Level O事件模型中的'oninput'相同。

顺便提及：

就像silkfire评论它一样，我也搜索了'jQuery输入事件'。因此，我被引导到这里并且惊讶地发现'输入'是jquery的 bind（）命令的可接受参数。在 jQuery in Action （p.102,2008 ed。）中，'input'未被提及为可能的事件（针对其他20个，从'blur'到'unload'）。确实，在第二页。如图92所示，可以推断重新读取（即，从对0级和2级模型之间的不同字符串标识符的引用）。这是非常误导的。

Answer 7

jQuery具有.on()方法的以下签名：.on( events [, selector ] [, data ], handler )

事件可以是此引用中列出的任何事件：

https://developer.mozilla.org/en-US/docs/Web/Events

尽管如此，并非所有浏览器都支持它们。

Mozilla对输入事件说明如下：

当一个值的值同步触发DOM输入事件或元素已更改。此外，它还会启动当内容发生变化时，可信的编辑。

Answer 8

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

在IE和Chrome中工作

jQuery'输入'事件

8 个答案: