oninput事件在输入法状态下多次触发

2019-05-28309次阅读javascript
  • oninput事件在<input>,<select>和 <textarea>元素的值发生改变时触发
  • onchange事件也是监听文本框变化后触发,不同的是oninput事件是立即(即时)触发,onchange则是在元素失去焦点时触发
  • oninput事件还可以在HTMLElement.contentEditable(用于表明元素是否是可编辑的)或 document.designMode(控制整个文档是否可编辑)打开的元素上使用。
  • onkeyup事件当一个按键被释放时,keyup事件被触发。

浏览器兼容IE9+,注:IE9中input删除文本时不会触发事件(通过退格键,删除键,剪切键等),更多oninput事件兼容性问题还请查看这里

切回正文,在输入文本时,输入法还在检索拼音,这时的oninput事件就一直在触发,如需求还涉及到请求接口时,这样频繁的请求会给接口造成很大压力。此时我们可以通过js函数节流的方式或DOM3的复合事件来解决此问题。

  • compositionstart:事件触发于一段文字的输入之前(类似于 keydown 事件,但是该事件仅在若干可见字符的输入之前,而这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词)。
  • compositionupdate:正插入的新字符。
  • compositionend:当文本合成系统(如输入法编辑器)完成或取消当前合成会话时,将触发该事件。例如,在用户使用拼音输入法输入汉字后,可以触发此事件。
var flag = true;
$('#input').on('compositionstart',function(){
    flag = false;
})
$('#input').on('compositionend',function(){
    flag = true;
})
$('#input').on('input',function(){
    setTimeout(function(){
        if(flag){
            console.log(1);
        }
    },0)
});

 

上一篇: js获取textarea文本域自动换行符  下一篇: input中readonly属性在IE下光标仍可聚焦  

oninput事件在输入法状态下多次触发相关文章