input輸入框限制20個字符，十個漢字

英文和數字為一個字符，漢字為兩個字符

在 Web 開發中，經常要對表單元素的輸入進行限制，比如說不允許輸入特殊字符，標點。通常我們會監聽 input 事件:

inputElement.addEventListener('input', function(event) { let regex = /[^1-9a-zA-Z]/g; event.target.value = event.target.value.replace(regex, ''); event.returnValue = false });

這段代碼在 Android 上是沒有問題的，但是在 iOS 中，input 事件會截斷非直接輸入，什么是非直接輸入呢，在我們輸入漢字的時候，比如說「喜茶」，中間過程中會輸入拼音，每次輸入一個字母都會觸發 input 事件，然而在沒有點選候選字或者點擊「選定」按鈕前，都屬於非直接輸入。

這顯然不是我們想要的結果，我們希望在直接輸入之后才觸發 input 事件，這就需要引出我要說的兩個事件—— compositionstart和compositionend。

compositionstart 事件在用戶開始進行非直接輸入的時候觸發，而在非直接輸入結束，也即用戶點選候選詞或者點擊「選定」按鈕之后，會觸發 compositionend 事件。

var inputLock = false; function do(inputElement) { var regex = /[^1-9a-zA-Z]/g; inputElement.value = inputElement.value.replace(regex, ''); } inputElement.addEventListener('compositionstart', function() { inputLock = true; }); inputElement.addEventListener('compositionend', function(event) { inputLock = false; do(event.target); }) inputElement.addEventListener('input', function(event) { if (!inputLock) { do(event.target); event.returnValue = false; } });

添加一個 inputLock 變量，當用戶未完成直接輸入前，inputLock 為 true，不觸發 input 事件中的邏輯，當用戶完成有效輸入之后，inputLock 設置為 false，觸發 input 事件的邏輯。這里需要注意的一點是，compositionend 事件是在 input 事件后觸發的，所以在 compositionend事件觸發時，也要調用 input 事件處理邏輯。

對於input輸入框限制20個字符，十個漢字

根據這個原理，我們可以這樣實現

var inputLock = false;
var deviceName=document.getElementById("device_name_input");
if(localStorage.getItem("deviceName")){
    deviceName.setAttribute("value",localStorage.getItem("deviceName"));
}
//中文輸入開始
deviceName.addEventListener('compositionstart', function() {
    inputLock = true;
});
//中文輸入結束
deviceName.addEventListener('compositionend', function(event) {
    inputLock = false;
    limitWords()
});
//計算輸入字符的總數
function limitWords() {
    var ChiLength=0;//中文漢字數
    var maxLength=0;
    function strlen(str){
        var newDeviceNameVal;
        var len = 0;
        ChiLength=0;//中文漢字數
        for (var i=0; i<str.length; i++) {
            var c = str.charCodeAt(i);
            var one = (c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f);
            //單字節加1
            if (one&&len<=20) {
                len++;
                maxLength++;
            } else if(len<20) {
                len+=2;
                ChiLength++;
                maxLength++;
            }
        }
        return len;
    }
    var deviceNameVal=event.currentTarget.value;
    var deviceNameInput=document.getElementById("device_name_input");
    var strLength=strlen(deviceNameVal);
//根據字符串中的漢字數，截取最終顯示的字符

deviceNameInput.value=event.currentTarget.value.substring(0,20-ChiLength);

    if(strLength>=20){
        var newMaxLength=maxLength;
        deviceNameInput.setAttribute("maxlength",newMaxLength);
    }else{
        deviceNameInput.setAttribute("maxlength",20);
    }
}
deviceName.addEventListener("input",function(event){
    if (!inputLock) {
        limitWords()
        event.returnValue = false;
    }
})