掩码输入值日期格式 Angular

Question

我想屏蔽我的input价值，基本上我有一个信用卡到期日的输入字段，并想以格式屏蔽它mm/yy，这就是我尝试过的：

输入mask.directive.ts

import { 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)}`);

    }

  }

}

我得到了预期的输出，但问题是在输入字段上使用退格键时，它搞砸了，这是我在stackblitz 上的演示，如何解决这个问题？或者有没有更好的输入掩码方法？

Answer 1

问题HTMLInput 元素的 maxlength 应该是 5，否则一旦您以编程方式在其中添加斜杠，它就不允许用户添加 4 位数字。在同样的问题存在const trimmed = input.value.replace(/\s+/g, '').slice(0,4);如果它包含一个斜杠，切片应在5而不是4月底。在return声明中return&nbsp;(input.value&nbsp;=&nbsp;`${trimmed.slice(0,&nbsp;2)}/${trimmed.slice(2)}`);如果斜线被添加一次，${trimmed.slice(2)将返回/\d{1,2}。所以你需要避免斜线并从3开始。解决方案将最大长度从 4 更改为 5&nbsp;<input&nbsp;...&nbsp;maxlength="5">现在，input-mask.directive.ts需要一些改变改变const&nbsp;trimmed&nbsp;=&nbsp;input.value.replace(/\s+/g,&nbsp;'').slice(0,4);到const&nbsp;trimmed&nbsp;=&nbsp;input.value.replace(/\s+/g,&nbsp;'').slice(0,&nbsp;input.value.indexOf('/')==-1?4:5);因为当你加上 时/，长度会变成 5。不要使用，.slice(0)因为它允许用户粘贴 5 位数字，当您添加斜杠时，它将变为 6。因此日期看起来像11/111而不是11/11改变return&nbsp;(input.value&nbsp;=&nbsp;`${trimmed.slice(0,&nbsp;2)}/${trimmed.slice(2)}`);到return&nbsp;(input.value&nbsp;=&nbsp;`${trimmed.slice(0,&nbsp;2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);这就是您的代码混乱的地方。如果它包含斜线，那么你应该从 3 开始切片。否则从 2 开始切片。输入掩码指令中 HostListener 的最终代码@HostListener('input', ['$event'])onKeyDown(event: KeyboardEvent) {&nbsp; const input = event.target as HTMLInputElement;&nbsp; const trimmed = input.value.replace(/\s+/g, '').slice(0, input.value.indexOf('/')==-1?4:5);&nbsp; if (trimmed.length > 3) {&nbsp; &nbsp; return (input.value = `${trimmed.slice(0, 2)}/${trimmed.slice(trimmed.indexOf('/')==-1?2:3)}`);&nbsp; }}

Answer 2

使用ngx-mask只需为日期、卡片等提供模式，就可以使您的工作变得轻松。<input type='text' mask='99/99' >这是stackblitz 演示