问题描述
输入框.png
文本域.png
当输入中文的时候会发现拼音也会同步输入
问题代码
- 文本域
<textarea
onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g,'')"
@input="input"
/>
- 输入框
<input
ref="input"
v-model="inputValue"
@input="input"
>
- JavaScript
watch:{
inputValue(value){
this.inputValue = value.replace(/[^\w\u4E00-\u9FA5]/g, '');
},
methods:{
input(e){
this.inputValue = e.target.value;
}
}
}
引发原因
在用输入法进行文本录入的时候，依然会调用数据更新方法和onkeyup、input事件，导致拼音也被更新到输入框的数据中
解决办法
通过compositionstart和compositionend事件监听输入法的输入，在进行输入法录入文本是不调用onkeyup、input事件，也不进行数据更新。需要注意compositionstart事件、compositionend事件和input事件三者的执行顺序在不同浏览器表现不同
实现代码
compositionEvent(){
const vm = this;
let input = vm.$refs.input;
if(input) {
//当文本合成系统（例如输入法编辑器）启动新的合成会话时，会触发该事件。
input.addEventListener('compositionstart',function(e){
vm.chineseInputStart = true;
});
//当文本合成系统（例如输入法编辑器）完成或取消当前合成会话时，将触发该事件。
input.addEventListener('compositionend',function(e){
vm.chineseInputStart = false;
vm.input();
});
}else {
setTimeout(function(){
vm.compositionEvent();
},0);
}
}
watch:{
inputValue(value){
//唤醒输入法输入中文时直接返回，防止输入中文时中文的拼音也会输入，造成重复输入
if(vm.chineseInputStart) return;
this.inputValue = value.replace(/[^\w\u4E00-\u9FA5]/g, '');
},
methods:{
input(e){
//唤醒输入法输入中文时直接返回，防止输入中文时中文的拼音也会输入，造成重复输入
if(vm.chineseInputStart) return;
this.inputValue = e.target.value;
}
}
}
