事情手记之挪动端中文输入法触发oninput事宜的解决方法

2019年8月31日 320次阅读 来源: 冷星

事宜背景

事情过程当中触及到了挪动端输入内容长度的限制，这就请求须要对输入过程当中内容的变化举行监控和剖断，以决议是不是能够继承输入，所以就想着是不是能够在相干输入处监听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);
});

觉得照样好坑，不能算是圆满的处置惩罚这个题目，临时只能先如许处置惩罚填坑了，人人有好的要领贫苦留言通知下:)

    原文作者：冷星
    原文地址: https://segmentfault.com/a/1190000007514184
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞