在某些情况下,我们需要即时监听文本框的变化,但在输入法的情况下keypress、keyup事件会失效。有什么办法解决呢?
问题
在开启输入法的情况下,三个浏览器的具体问题如下:
- IE:触发keydown和keyup, 不触发keypress. 能够获得输入值。
- Firefox:触发keydown和keypress, 不触发keyup. 输入值未能获得。在回车后会触发keyup, 可获得输入值。
- Opera:keydown, keypress和keyup都不触发,输入值也未能获。
- Chrom:不会触发keypress事件
解决方案
- 使用setInterval实现
当输入框处于聚焦(focus)状态时,设置一个定时器,每 10 毫秒执行一次回调函数;在输入框失焦(blur)时,清除这个计时器。
onpropertychange
+oninput
事件实现
IE支持onpropertychange事件,firefox、chrome支持oninput事件。
遗憾的是,在输入法开启的情况下,Opera对于 oninput
也没法随时监听(表现在:输入英文字母可以监听到,而中文则失效)。如果不考虑 Opera, IE使用 onpropertychange
而 Firefox、Chrome 使用 oninput
, 也可解决我们上述问题。
另外需要注意的是, oninput
比较诡异,您可以<input oninput="jsFunc()" ... />
来绑定,也可以用addEventListener
来绑定,就是不能使用 DOM 0 的element.oninput = function(){}
的形式来绑定,否则不生效。