H5学习笔记h5的坑

中文输入法触发oninput事件解决办法

2017-12-06  本文已影响26人  xilong

oninput事件 在移动端,中文输入的过程当中,输入框默认会显示英文字母,会触发oninput事件,但是输入还没有结束,所以会出现问题。
网上找了compositionstart和compositionend两个事件进行一个开关判断

compositionstart
当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend
当浏览器是直接的文字输入时, compositionend会以同步模式触发

解决办法 开始中文输入时会触发compositionstart事件,选词结束后会触发compositionend事件,忽略这两个事件之间的input事件

<input type="text" id="sample" />

var node = document.querySelector('#sample');
var inputLock = false;
node.addEventListener('compositionstart', function(){
    inputLock = true;
})
node.addEventListener('compositionend', function(){
    inputLock = false;
    //if(!inputLock )console.log(this.value); 这里可以看情况用,我没用也可以。
})
node.addEventListener('input', function(){
    if(!inputLock )console.log(this.value);
    // do something hear
});
上一篇 下一篇

猜你喜欢

热点阅读