1. 程式人生 > 其它 >實現每四位字元新增一個短橫線(考慮使用者刪除、複製貼上輸入的情況)

實現每四位字元新增一個短橫線(考慮使用者刪除、複製貼上輸入的情況)

技術標籤:jQuery專欄vuejs

比想象中簡單很多,剛開始不知道這個方法的時候,純粹用字串拼接,條件太多,用下面這個方法就簡單很多,此方法可以用在諸多類似需求中,上程式碼:

在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