第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會有你想問的

掩碼輸入值日期格式 Angular

掩碼輸入值日期格式 Angular

繁華開滿天機(jī) 2021-11-18 16:16:11
我想屏蔽我的input價(jià)值,基本上我有一個(gè)信用卡到期日的輸入字段,并想以格式屏蔽它mm/yy,這就是我嘗試過的:輸入mask.directive.tsimport { Directive, HostListener } from '@angular/core';import { NgControl } from '@angular/forms';@Directive({  selector: '[formControlName][appInputMask]',})export class InputMaskDirective {  @HostListener('input', ['$event'])  onKeyDown(event: KeyboardEvent) {    const input = event.target as HTMLInputElement;    const trimmed = input.value.replace(/\s+/g, '').slice(0, 4);    if (trimmed.length > 3) {      return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(2)}`);    }  }}我得到了預(yù)期的輸出,但問題是在輸入字段上使用退格鍵時(shí),它搞砸了,這是我在stackblitz 上的演示,如何解決這個(gè)問題?或者有沒有更好的輸入掩碼方法?
查看完整描述

2 回答

?
GCT1015

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超4個(gè)贊

問題

  1. HTMLInput 元素的 maxlength 應(yīng)該是 5,否則一旦您以編程方式在其中添加斜杠,它就不允許用戶添加 4 位數(shù)字。

  2. 在同樣的問題存在const trimmed = input.value.replace(/\s+/g, '').slice(0,4);如果它包含一個(gè)斜杠,切片應(yīng)在5而不是4月底。

  3. 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)}`);

  }

}


查看完整回答
反對 回復(fù) 2021-11-18
?
呼喚遠(yuǎn)方

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超11個(gè)贊

使用ngx-mask只需為日期、卡片等提供模式,就可以使您的工作變得輕松。

<input type='text' mask='99/99' >

這是stackblitz 演示


查看完整回答
反對 回復(fù) 2021-11-18
  • 2 回答
  • 0 關(guān)注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號