輸入框文本輸入限制問題以及中文輸入法下字符階段的處理

　　　　　　　　輸入框文本字數限制問題以及中文輸入法下字符截斷處理

　　　　上次博文寫過處理實時獲取輸入表單的值，傳送門: 博文地址。這次又需要處理輸入框文本字數限制問題，前期的步驟思想其實就是要先實時獲取輸入框的值然后得到長度。

　　使用onkeyup判斷字符長度

　　　　可以參考我前面寫的博文，地址如上。onkeyup確實是可以做到實時獲取的效果，因此我就是使用鍵盤事件來達到效果。HTML代碼：

<div class="content">
    <textarea name="complain" id="text" onkeyup="limiNum(this)"  placeholder="請輸入投訴內容"></textarea>
    <p><span><strong id="num">0</strong>/16</span></p>
</div>

　　　　JS代碼：

  // 限制內容長度函數
  function limiNum(domEle) {
     //最大長度為16
    var maxLen = 16;
    var curtLen = domEle.value.length;
    if ( curtLen > maxLen ) { //當長度大於16就截取字符串
        domEle.value = domEle.value.substring(0, maxLen);
    }
    document.getElementById("num").innerHTML = domEle.value.length.toString();
  }

　　　　　當你輸入的字符串長度大於16時，字符串會被進行截。大致效果如圖（1）。 但是此時輸入的是純英文或者是字符數字的混合，不是在中文輸入法下的，我們來看看在中文輸入法下會怎么樣。圖（2）

　　　　　  圖（1）    。    圖（2）  圖（3）

 

 

　如圖我輸入“程序員”的拼音而並沒有選擇好，此時的長度就已經是11，在控制台也輸出了“chengxuyuan”圖（3），這樣導致的問題是如果我已經輸好了長度為15的字符串，還要輸入一個中文時，會被在用戶輸入達到邊界值時，莫名其妙地將用戶的輸入截斷，導致中文輸入無法接續。假如我想接着輸入中文“坐”字，先按了字母“z”，輸入字符長度就變為16了，圖（4），　 控制台的判斷如圖：圖（5）

 　　　　  圖（4）   　　　　　　　　　　 　 圖（5）

因此我們再按字母“u”，就必定會被截斷，達不到預想的效果，這對於用於體驗是不好的。所以需要進行改進。

　　compositionstart,compositionend

　　　　采用compositionstart、compositionend來捕獲IME（input method editor）的啟動和關閉事件.我使用chrome的版本是56.0.2924.87，親測先觸發compositionstart，接着觸發compositionend，最后觸發input，因此我在compositionend事件處理程序中也添加了截斷字符串處理函數，就解決了上面產生的問題。

若我想輸入“中”字，此時字母a-o已經有15個字符了，但“zhong”並不會被截斷。圖（6）（7）

　　　　　　　　 圖（6）  　　　　     圖（7）

　　　　此時輸入完成如圖，完美解決了中文輸入法截斷的問題。改進代碼如下:

var node = $("#text").get(0);
var cpLock = false;
node.addEventListener('compositionstart', function(){
     cpLock = true;
     console.log('中文輸入開始');
})
node.addEventListener('compositionend', function(){
    cpLock = false;
     console.log('中文輸入結束');
     calNum(this);
})
node.addEventListener('input', function(){
    console.log("觸發input");
    calNum(this);
});
//字符串截斷函數            
function calNum(domEle) {
    if(!cpLock) { 
        var maxLen = 16;
        var curtLen = domEle.value.length;
        console.log('當前輸入' + domEle.value);
        if ( curtLen > maxLen ) {
        　　domEle.value = domEle.value.substring(0, maxLen);
        }                                                 
25　　　　　document.getElementById("num").innerHTML = domEle.value.length.toString();
    }
}            

　　感興趣的可以親自測試下，效果很是很好的，童叟無欺哦。