1. 程式人生 > >限制input輸入字元數(中文2個字元,英文1個字元)

限制input輸入字元數(中文2個字元,英文1個字元)

input的maxlength可以限制input的輸入的字元數,但是是字串的長度,相當於判斷str.length;然而經常會有中文字元算2個字元英文算1個字元的需求,目前只能通過編寫程式碼來實現。

<input class="remark-modify" maxlength="32" type="text" v-model="name" @blur="saveRemark" @keypress.enter="saveRemark" @keyup="limitLength" autofocus>

  

限制長度的程式碼:

   limitLength(e) {
        const input = e.target;
        const value = input.value
        const split = value.split('');
        const map = split.map((s, i) => {
            return (value.charCodeAt(i) >= 0 && value.charCodeAt(i) <= 128) ? 1 : 2;
        });
        let n = 0;
        const charLength = map.length > 0 && map.reduce((accumulator, currentValue, index) => { 
            const count = accumulator + currentValue;
            if (count === 31 || count === 32) {
                n = index;
            }
            if (count > 32) {       
                this.name = split.slice(0, n+1).join('')    
                // this.$emit("setUserName",split.slice(0, n+1).join(''));
            }   
            return count
        });
    
    },

  

 

注:當同時要滿足失去輸入框焦點儲存輸入框資料,又要滿足回車儲存輸入框資料時,回車之後,會先觸發回車然後再觸發失去焦點的事件。

      可以判斷當前的觸發事件的型別(比如enter可以通過判斷事件物件中的key,blur可以通過判斷事件物件中的type)來加條件,觸發enter就不讓觸發失去焦點的方法去執行儲存操作。

 

其他有問題的實現方法:

1、使用事件中的阻止預設事件實現達到最大輸入值時阻止輸入框的輸入,需要注意在事件觸發後的任何階段呼叫preventDefault方法來取消該事件,意味著該事件的所有預設動作都不會發生.預設事件包括:複製、刪除等操作都不能再執行。

     remarkKeyup(e) {
        const input = e.target;
        //匹配漢字正則表示式
        const regex = /[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29\u{20000}-\u{2A6D6}\u{2A700}-\u{2B734}\u{2B740}-\u{2B81D}\u{2B820}-\u{2CEA1}\u{2CEB0}-\u{2EBE0}]/ug;
        const replace 
= input.value.replace(regex, 'aa'); const length = replace.split('').length; if (length >= 32) { e.preventDefault(); } }