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');

拥有完整的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您input.text添加到DOM 之前设置事件),应该会想到:

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

可悲的是,它再次无法正常工作!

只有这种模式有效:

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

编辑更多当前信息

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

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

在所有"标准"浏览器中,现在也可以工作.