zoukankan      html  css  js  c++  java
  • 输入法下keypress、keyup失效的解决方案

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

  • 相关阅读:
    从操作系统拖拽图片到指定区域进行预览
    原生拖拽,拖放事件(drag and drop)
    H5原生拖拽事件
    css3滚动提示
    通过模糊来弱化背景
    js获取url的各项参数
    垂直居中 解决方法
    紧贴底部的页脚
    实现html元素跟随touchmove事件的event.touches[0].clientX移动
    前端方面值得尊敬的大神们
  • 原文地址:https://www.cnblogs.com/qhca/p/2284858.html
Copyright © 2011-2022 走看看