jQuery“输入”事件
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17384218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery 'input' event
提问by silkfire
采纳答案by J David Smith
Occurs when the text content of an element is changed through the user interface.
当通过用户界面更改元素的文本内容时发生。
It's not quite an alias for keyup
because keyup
will fire even if the key does nothing (for example: pressing and then releasing the Control key will trigger a keyup
event).
它不是一个别名,keyup
因为keyup
即使该键什么都不做也会触发(例如:按下然后释放 Control 键将触发一个keyup
事件)。
A good way to think about it is like this: it's an event that triggers whenever the input changes. This includes -- but is not limited to -- pressing keys which modify the input (so, for example, Ctrl
by itself will not trigger the event, but Ctrl-V
to paste some text will), selecting an auto-completion option, Linux-style middle-click paste, drag-and-drop, and lots of other things.
一个很好的思考方式是这样的:它是一个在输入改变时触发的事件。这包括——但不限于——按下修改输入的键(例如,Ctrl
它本身不会触发事件,但Ctrl-V
粘贴一些文本会),选择自动完成选项,Linux 风格的中间- 单击粘贴、拖放和许多其他操作。
See thispage and the comments on this answer for more details.
有关更多详细信息,请参阅此页面和对此答案的评论。
回答by claustrofob
oninput
event is very useful to track input fields changes.
oninput
事件对于跟踪输入字段的变化非常有用。
However it is not supported in IE version < 9. But older IE versions has its own proprietary event onpropertychange
that does the same as oninput
.
然而,它在 IE 版本 < 9 中不受支持。但是较旧的 IE 版本有它自己的专有事件onpropertychange
,与oninput
.
So you can use it this way:
所以你可以这样使用它:
$(':input').on('input propertychange');
To have a full crossbrowser support.
拥有完整的跨浏览器支持。
Since the propertychange can be triggered for ANY property change, for example, the disabled property is changed, then you want to do include this:
由于可以为任何属性更改触发 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 */
}
});
回答by Ifedi Okonkwo
Using jQuery, the following are identical in effect:
使用 jQuery,以下效果相同:
$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });
With the input
event, however, only the second pattern seems to work in the browsers I've tested.
input
但是,对于该事件,似乎只有第二种模式在我测试过的浏览器中有效。
Thus, you'd expect this to work, but it DOES NOT (at least currently):
因此,您希望这会起作用,但它不会(至少目前是这样):
$(':text').input(function(){ doSomething(); });
Again, if you wanted to leverage event delegation (e.g. to set up the event on the #container
before your input.text
is added to the DOM), this should come to mind:
同样,如果您想利用事件委托(例如在将事件添加到 DOM#container
之前设置事件input.text
),应该想到这一点:
$('#container').on('input', ':text', function(){ doSomething(); });
Sadly, again, it DOES NOT work currently!
可悲的是,它目前不起作用!
Only this pattern works:
只有这种模式有效:
$(':text').on('input', function(){ doSomething(); });
EDITED WITH MORE CURRENT INFORMATION
使用更多最新信息进行编辑
I can certainly confirm that this pattern:
我当然可以确认这种模式:
$('#container').on('input', ':text', function(){ doSomething(); });
NOW WORKS also, in all 'standard' browsers.
现在也适用于所有“标准”浏览器。
回答by Zook
As claustrofob said, oninput is supported for IE9+.
正如claustrofob所说,IE9+支持oninput。
However, "The oninput event is buggy in Internet Explorer 9. It is not fired when characters are deleted from a text field through the user interface only when characters are inserted. Although the onpropertychange event is supported in Internet Explorer 9, but similarly to the oninput event, it is also buggy, it is not fired on deletion.
但是,“Internet Explorer 9 中的 oninput 事件有问题。只有在插入字符时,才通过用户界面从文本字段中删除字符时才会触发它。虽然 Internet Explorer 9 支持 onpropertychange 事件,但与oninput 事件,它也有问题,删除时不会触发。
Since characters can be deleted in several ways (Backspace and Delete keys, CTRL + X, Cut and Delete command in context menu), there is no good solution to detect all changes. If characters are deleted by the Delete command of the context menu, the modification cannot be detected in JavaScript in Internet Explorer 9."
由于可以通过多种方式删除字符(退格和删除键、CTRL + X、上下文菜单中的剪切和删除命令),因此没有检测所有更改的好的解决方案。如果通过上下文菜单的删除命令删除字符,则无法在 Internet Explorer 9 的 JavaScript 中检测到修改。”
I have good results binding to both input and keyup (and keydown, if you want it to fire in IE while holding down the Backspace key).
我有很好的结果绑定到 input 和 keyup (和 keydown,如果你希望它在按住 Backspace 键的同时在 IE 中触发)。
回答by Ananda Naphade
Be Careful while using INPUT. This event fires on focus and on blur in IE 11. But it is triggered on change in other browsers.
使用 INPUT 时要小心。此事件在 IE 11 中的焦点和模糊时触发。但它会在其他浏览器中发生变化时触发。
https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus
https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus
回答by Brice Coustillas
I think 'input' simply works here the same way 'oninput' does in the DOM Level O Event Model.
我认为 'input' 在这里的工作方式与 DOM Level O 事件模型中的 'oninput' 相同。
Incidentally:
顺便:
Just as silkfire commented it, I too googled for 'jQuery input event'. Thus I was led to here and astounded to learn that 'input' is an acceptable parameter to jquery's bind()command. In jQuery in Action(p. 102, 2008 ed.) 'input' is not mentionned as a possible event (against 20 others, from 'blur' to 'unload'). It is true that, on p. 92, the contrary could be surmised from rereading (i.e. from a reference to different string identifiers between Level 0 and Level 2 models). That is quite misleading.
正如silkfire 所评论的那样,我也在谷歌上搜索了“jQuery 输入事件”。因此,我被带到这里并惊讶地发现“输入”是 jquery 的bind()命令的可接受参数。在jQuery in Action(第 102 页,2008 年版)中,没有提到“输入”作为可能的事件(针对其他 20 个,从“模糊”到“卸载”)。的确,在 p. 92,相反可以通过重读(即从对级别 0 和级别 2 模型之间的不同字符串标识符的引用)推测出来。那是相当误导的。
回答by Robert Rocha
jQuery has the following signature for the .on()
method: .on( events [, selector ] [, data ], handler )
jQuery 对该.on()
方法具有以下签名:.on( events [, selector ] [, data ], handler )
Events could be anyone of the ones listed on this reference:
事件可以是此参考中列出的任何事件:
https://developer.mozilla.org/en-US/docs/Web/Events
https://developer.mozilla.org/en-US/docs/Web/Events
Though, they are not all supported by every browser.
但是,并非每个浏览器都支持它们。
Mozilla states the following about the input event:
Mozilla 声明了以下有关输入事件的信息:
The DOM input event is fired synchronously when the value of an or element is changed. Additionally, it fires on contenteditable editors when its contents are changed.
当 或 元素的值发生更改时,DOM 输入事件会同步触发。此外,它会在内容更改时触发 contenteditable 编辑器。
回答by Raj
$("input#myId").bind('keyup', function (e) {
// Do Stuff
});
working in both IE and chrome
在 IE 和 chrome 中工作