在某些情况下,我们需要即时监听文本框的变化,但在输入法的情况下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(){} 的形式来绑定,否则不生效。

相关文章:

  • 2021-10-23
  • 2022-12-23
  • 2021-10-21
  • 2022-12-23
  • 2021-08-03
  • 2022-02-11
  • 2021-07-10
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-09-02
  • 2022-12-23
  • 2021-10-15
  • 2021-07-31
  • 2021-10-25
相关资源
相似解决方案