最近项目中遇到的一个需求,要求用户输入车牌号,并且要求车牌号只能为大写字母,想了想觉得很简单,刷刷刷就写好了:
<input type="text" id="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("input",function(e) {
this.value = this.value.toUpperCase();
})
</script>
测试了一下也没什么问题,于是就提交了,可是没多久测试就发现了问题:因为是车牌号所以要输入中文,但是微软拼音输入法在输入中文时会先在输入框中显示拼音,然后就被转换成了大写字母,导致输入的中文前面总是会出现大写的拼音字母.
查了一下发现了三个用于IME输入序列的事件:
compositionstart：要开始输入；
compositionupdate：插入新字符；
compositionend：复合系统关闭，返回正常键盘输入状态；
测试了一下compositionstart事件在input事件之前触发,然后问题就好解决了:
<input type="text" id="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("compositionstart",function(e) {
this.compositing = true; //给触发事件的input对象添加compositing属性并设为true,表明正在进行中文输入
})
document.getElementById("input").addEventListener("compositionend",function(e) {
this.compositing = false; //结束中文输入
})
document.getElementById("input").addEventListener("input",function(e) {
!this.compositing && (this.value = this.value.toUpperCase()); //不在中文输入状态时才进行转换
})
</script>
测试了一下,问题解决.
