类似限制输入长度这种需求。
通常、我们会添加监听:
<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
app
也就是表示在用户进行非直接输入的时候、监听事件也对用户行为进行了处理、这不是我们想要的。
所以、我们需要用到两个事件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
app
有些浏览器或者手机版本下。input监听和compositionend调用的顺序可能会有先后。需要特殊注意。