工作手记之移动端中文输入法触发oninput事件的解决方法

事件背景

工作过程中涉及到了移动端输入内容长度的限定,这就要求需要对输入过程中内容的变化进行监控和判定,以决定是否可以继续输入,所以就想着是否可以在相关输入处监听oninput事件?但是在手机端,中文输入过程中,默认输入框里面会显示相关的英文字母,这个时候会触发oninput事件,但是这个时候输入并没有结束,所以导致判断时机不正确。经过在网上的查找,找到了compositionstart和compositionend两个事件进行一个开关判断。

关于oninput事件

oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。 oninput 事件兼容为ie9+, ie下可以onpropertychange事件,不是本节内容。

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;
})
node.addEventListener('input', function(){
    if(!inputLock )
    // do something for input limit
});

总结

通过上面上面两个事件就可以解决移动端中文输入法触发input事件的问题了。

2016/11/23补充

最近测试了下发现:

compositionend 在 input 事件之后才触发 so。。。

于是只能在compositionend 里 也加上处理代码

复制代码

node.addEventListener('compositionstart', function(){
    cpLock = true;
})

node.addEventListener('compositionend', function(){
    cpLock = false;
     if(!cpLock)console.log(this.value);
})

node.addEventListener('input', function(){
    if(!cpLock)console.log(this.value);
});

感觉还是好坑,不能算是完美的解决这个问题,暂时只能先这样处理填坑了,大家有好的方法麻烦留言告诉下:)

阅读 6.9k

推荐阅读

大道至简,知易行难,知行合一,得到功成;大道至简,悟在天成。

528 人关注
44 篇文章
专栏主页