2 回答

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊
問題
HTMLInput 元素的 maxlength 應(yīng)該是 5,否則一旦您以編程方式在其中添加斜杠,它就不允許用戶添加 4 位數(shù)字。
在同樣的問題存在
const trimmed = input.value.replace(/\s+/g, '').slice(0,4);
如果它包含一個(gè)斜杠,切片應(yīng)在5而不是4月底。在
return
聲明中return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);
如果斜線被添加一次,${trimmed.slice(2)
將返回/\d{1,2}
。所以你需要避免斜線并從3開始。
解決方案
將最大長度從 4 更改為 5
<input ... maxlength="5">
現(xiàn)在,input-mask.directive.ts需要一些改變
改變
const trimmed = input.value.replace(/\s+/g, '').slice(0,4);
到
const trimmed = input.value.replace(/\s+/g, '').slice(0, input.value.indexOf('/')==-1?4:5);
因?yàn)楫?dāng)你加上 時(shí)/
,長度會變成 5。
不要使用,
.slice(0)
因?yàn)樗试S用戶粘貼 5 位數(shù)字,當(dāng)您添加斜杠時(shí),它將變?yōu)?6。因此日期看起來像11/111
而不是11/11
改變
return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);
到
return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);
這就是您的代碼混亂的地方。如果它包含斜線,那么你應(yīng)該從 3 開始切片。否則從 2 開始切片。
輸入掩碼指令中 HostListener 的最終代碼
@HostListener('input', ['$event'])
onKeyDown(event: KeyboardEvent) {
const input = event.target as HTMLInputElement;
const trimmed = input.value.replace(/\s+/g, '').slice(0, input.value.indexOf('/')==-1?4:5);
if (trimmed.length > 3) {
return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);
}
}

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊
添加回答
舉報(bào)