相信各位在平時接需求的時候肯定會遇到這樣的一些需求，例如，要求輸入框限制輸入長度，限制輸入類型，限制只能英文輸入，限制只能輸入大寫字母等等，這時候我們一般的思路無非兩種，一種是彈出特定的鍵盤，第二種是在輸入的過程中對輸入內容進行正則匹配，然后根據自己的需求對input框進行賦值。彈出特定鍵盤可以通過對input框的type屬性進行賦值，但由于不同的瀏覽器對彈出的輸入框都有比較嚴格的限制，并且彈出之后用戶可以進行切換，達不到限制用戶輸入的目的，所以接下來主要討論第二種方法。

一般說到修改用戶的輸入，第一個想法肯定是綁定input事件，input事件能夠檢測用戶的每一次輸入，例如我們要將用戶輸入的文字實時轉換成大寫，只需要input事件綁定以下方法

function(e){
e.target.value=e.target.value.toUpperCase()
}
這種方法對于英文輸入時完全沒毛病，但是一旦用戶切換到中文輸入法或者手寫輸入，你就會發現，問題來了，input事件會觸發，但你每次捕獲到的e.target.value卻不是你輸入的中文，例如我們執行下面的代碼

document.getElementById('testInput').addEventListener('input',function(e){
console.log('輸入內容：'+e.target.value);
},false);
你會發現是這樣一種情況（測試工具：chome，ie經過測試并未存在此問題）

?

?

那么，我們如何捕獲中文輸入法或者其他非直接輸入法的輸入狀態呢，參考以下兩個事件

1.compositionstart，事件觸發于一段文字的輸入之前（類似于?keydown?事件，但是該事件僅在若干可見字符的輸入之前，而這些可見字符的輸入可能需要一連串的鍵盤操作、語音識別或者點擊輸入法的備選詞）

2.compositionend，當文本段落的組成完成或取消時, compositionend 事件將被激發 (具有特殊字符的激發, 需要一系列鍵和其他輸入, 如語音識別或移動中的字詞建議)

簡單來說，非直接輸入法如中文輸入開始時，觸發compositionstart事件，結束時觸發compositionend事件，這樣，我們跟input事件進行配合，就能對所有的輸入進行實時的檢測了，示例代碼如下

window.οnlοad=function(){
var doing=false;
var doSomething=function(e){
//我要干點啥
}
document.getElementById('testInput').addEventListener('compositionstart',function(e){
doing=true;
},false);
document.getElementById('testInput').addEventListener('input',function(e){
if(!doing){
doSomething();
}
},false);

document.getElementById('testInput').addEventListener('compositionend',function(e){
doing=false;
doSomething();
},false);
}
最后，這兩個事件比較新，并不兼容所有的瀏覽器，但經過測試，兼容目前大部分的移動端瀏覽器，ie9仿真情況下測試通過，chome測試通過，Firefox9.0以上測試通過

參考資料：

compositionstart相關

compositionend相關
---------------------
作者：小敏哥
來源：CSDN
原文：https://blog.csdn.net/handsomexiaominge/article/details/80977402
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

轉載于:https://www.cnblogs.com/asdyzh/p/9829678.html

總結

以上是生活随笔為你收集整理的js如何判断当前文本的输入状态——中文输入法的那些坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。