實現每四位字元新增一個短橫線(考慮使用者刪除、複製貼上輸入的情況)
阿新 • • 發佈:2020-12-27
比想象中簡單很多,剛開始不知道這個方法的時候,純粹用字串拼接,條件太多,用下面這個方法就簡單很多,此方法可以用在諸多類似需求中,上程式碼:
在vue中可以用watch,其他也可以使用input事件進行觸發
<input type="text" @input="changeStr">
function changeStr () {
val = val || '';
//如果使用者輸入了-,需要去除-【全域性替換】
val = val.replace(/-/g, '');
//match 選取每四位 作為陣列的一項【如果val='',則arr設定為[] 空陣列】
let arr = val.trim().match(/.{1,4}/g) || [];
//我這裡只允許加上短橫線的14位
this.code = arr.join('-').slice(0, 14);
}
下面請看效果圖
end