[element plus]計算input中英文字元長度

2024 年 7 月 1 日

element本身的maxlength只能限制文字長度(中文1 = 英數1)
但實際回存資料進DB長度計算通常為字元居多

vue開立utf-8編碼專案的情況下 中文3 英數1字元
使用的公式是
const character = new TextEncoder().encode('字串123’).length
長度結果為9

跟el-input結合範例如下：

let vender = ref('') //要偵測長度的項目
let overNum = ref(false) //變更class

function maxTextDetect(){
      //字元限制40
        const maxLength = 40
        const textLength = new TextEncoder().encode(vender.value).length //算出位元數 中文字3 數字英文1
        overNum.value = textLength > maxLength;
}

將超過長度的輸入框添加errorText的class

<el-input :class="overNum?'errorText':''" v-model="vender"  @keyup="maxTextDetect()"/>

再將errorText添加上讓文字變紅的css
就能達到在畫面上警示有輸入錯誤的地方了