3c07008a38af8469.jpg
类似限制输入长度这种需求。
通常、我们会添加监听:
<script >
var textInput = document.querySelector('#text_input');
textInput.addEventListener('input', function(){
if(this.value.length>=10){
this.value=this.value.substring(0,10)
}
});
</script>
这段代码在英文、数字、符号输入等情况下是没有问题的。
但是在中文情况下：
web
144e08c0-e957-42ae-8878-c6d87be192f7.gif
app
d155b124-a639-4c39-825a-0953298288a5.gif
也就是表示在用户进行非直接输入的时候、监听事件也对用户行为进行了处理、这不是我们想要的。
所以、我们需要用到两个事件compositionstart 和 compositionend。
<script >
var textInput = document.querySelector('#text_input');
var inputLock = false;
textInput.addEventListener('compositionstart', function(){
inputLock = true;
})
textInput.addEventListener('compositionend', function(){
inputLock = false;
})
textInput.addEventListener('input', function(){
if(! inputLock){
if(this.value.length>=10){
this.value=this.value.substring(0,10)
}
};
});
</script>
compositionstart事件在用户开始进行非直接输入的时候触发。
compositionend事件则在用户进行直接输入的时候触发。
通过一个开关inputLock。在用户进行非直接输入时不进行处理、改为直接输入时再进行处理。
web
2a71ba3d-e235-46c3-a954-77c22a9a6c3b.gif
app
0d8c4353-fb61-4c40-a8e7-cc28d38155a9.gif
有些浏览器或者手机版本下。input监听和compositionend调用的顺序可能会有先后。需要特殊注意。
