最近項(xiàng)目中遇到的一個(gè)需求,要求用戶輸入車牌號(hào),并且要求車牌號(hào)只能為大寫字母,想了想覺(jué)得很簡(jiǎn)單,刷刷刷就寫好了:
<input type="text" id="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("input",function(e) {
this.value = this.value.toUpperCase();
})
</script>
測(cè)試了一下也沒(méi)什么問(wèn)題,于是就提交了,可是沒(méi)多久測(cè)試就發(fā)現(xiàn)了問(wèn)題:因?yàn)槭擒嚺铺?hào)所以要輸入中文,但是微軟拼音輸入法在輸入中文時(shí)會(huì)先在輸入框中顯示拼音,然后就被轉(zhuǎn)換成了大寫字母,導(dǎo)致輸入的中文前面總是會(huì)出現(xiàn)大寫的拼音字母.
查了一下發(fā)現(xiàn)了三個(gè)用于IME輸入序列的事件:
compositionstart：要開(kāi)始輸入盗扒；
compositionupdate：插入新字符说敏；
compositionend：復(fù)合系統(tǒng)關(guān)閉埂陆，返回正常鍵盤輸入狀態(tài)囊拜；
測(cè)試了一下compositionstart事件在input事件之前觸發(fā),然后問(wèn)題就好解決了:
<input type="text" id="input" />
<script type="text/javascript">
document.getElementById("input").addEventListener("compositionstart",function(e) {
this.compositing = true; //給觸發(fā)事件的input對(duì)象添加compositing屬性并設(shè)為true,表明正在進(jìn)行中文輸入
})
document.getElementById("input").addEventListener("compositionend",function(e) {
this.compositing = false; //結(jié)束中文輸入
})
document.getElementById("input").addEventListener("input",function(e) {
!this.compositing && (this.value = this.value.toUpperCase()); //不在中文輸入狀態(tài)時(shí)才進(jìn)行轉(zhuǎn)換
})
</script>
測(cè)試了一下,問(wèn)題解決.
