jquery - jQuery“输入”事件

Question

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

你知道它为什么起作用吗？它是别名keyup还是什么？

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

Answer 1

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

它不是一个别名，keyup因为keyup即使该键什么也不做也会触发（例如：按下然后释放 Control 键将触发一个keyup事件）。

一个很好的思考方式是这样的：它是一个在输入发生变化时触发的事件。这包括——但不限于——按下修改输入的键（例如，Ctrl它本身不会触发事件，但Ctrl-V粘贴一些文本会），选择自动完成选项，Linux 风格的中间-单击粘贴、拖放和许多其他操作。

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

Answer 2

oninput事件对于跟踪输入字段的变化非常有用。

但是 IE 版本 < 9 不支持它。但是旧 IE 版本有自己的专有事件onpropertychange，与oninput.

所以你可以这样使用它：

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

拥有完整的跨浏览器支持。

由于可以为任何属性更改触发 propertychange，例如，禁用的属性被更改，那么您想要包含以下内容：

$(':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在您input.text被添加到 DOM 之前设置事件），应该想到这一点：

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

可悲的是，它目前不起作用！

只有这种模式有效：

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

编辑了更多当前信息

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

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

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

Answer 4

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

但是，“oninput 事件在 Internet Explorer 9 中存在问题。只有在插入字符时，通过用户界面从文本字段中删除字符时才会触发它。虽然 Internet Explorer 9 支持 onpropertychange 事件，但与oninput 事件，它也是错误的，它不会在删除时触发。

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

我对 input 和 keyup （和 keydown，如果你希望它在按住 Backspace 键的同时在 IE 中触发）都有很好的绑定。

Answer 5

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

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

Answer 6

我认为“输入”在这里的工作方式与“oninput”在 DOM 级别 O 事件模型中的工作方式相同。

顺便：

正如 Silkfire 评论的那样，我也搜索了“jQuery 输入事件”。因此，我被带到这里并惊讶地发现“输入”是 jquery 的bind()命令的可接受参数。在jQuery in Action (p. 102, 2008 ed.) 中，没有提到“输入”作为可能的事件（相对于其他 20 个事件，从“模糊”到“卸载”）。确实，在第 1 页。92，从重读（即从对 0 级和 2 级模型之间的不同字符串标识符的引用）可以推测出相反的情况。这是相当误导的。

Answer 7

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

事件可以是此参考中列出的任何事件：

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

但是，并非所有浏览器都支持它们。

Mozilla 对输入事件声明如下：

当一个 or 元素的值改变时，DOM 输入事件被同步触发。此外，当其内容发生更改时，它会在 contenteditable 编辑器上触发。

Answer 8

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

在 IE 和 chrome 中工作