[element plus]計算input中英文字元長度
![](https://goodlevelup.com/wp-content/uploads/2024/07/file.jpg)
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
就能達到在畫面上警示有輸入錯誤的地方了