el's blog

A noder, FEer. use express, vue...etc

input 中文输入法输入优化
用户切换输入法状态为中文时,输入在未选择词组到输入框也会触发事件的bug优化解决

场景描述

当用户当前输入法状态是中文时,在未选择词组到输入框也会触发事件

如图所示输入了input做了事件监听输入事件时强制转化成大写,而引发的中文输入法的情况下输入a,也已经触发了输入动作。

解决方法

需要引入两个事件:compositionstart和compositionend,ie9+ 的兼容。

1
<input type="text" id="plate" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var node = document.querySelector('#person');
var cpLock = false;
node.addEventListener('compositionstart', function(){
cpLock = true;
})
node.addEventListener('compositionend', function(){
cpLock = false;
})
node.addEventListener('input', function () {
if (!cpLock) {
console.log(this.value);
this.value = this.value.toUpperCase();
}
});

compositionstart

当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.

compositionend

当浏览器是直接的文字输入时, compositionend会以同步模式触发.

参考

input 事件兼容处理以及中文输入法优化