掩码输入值日期格式 Angular

Question

我想屏蔽我的input价值，基本上我有一个信用卡到期日的输入字段，并想以格式屏蔽它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)}`);    }  }}我得到了预期的输出，但问题是在输入字段上使用退格键时，它搞砸了，这是我在stackblitz 上的演示，如何解决这个问题？或者有没有更好的输入掩码方法？

Answer 1

问题

1. HTMLInput 元素的 maxlength 应该是 5，否则一旦您以编程方式在其中添加斜杠，它就不允许用户添加 4 位数字。

2. 在同样的问题存在const trimmed = input.value.replace(/\s+/g, '').slice(0,4);如果它包含一个斜杠，切片应在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">

现在，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);

因为当你加上 时/，长度会变成 5。

不要使用，.slice(0)因为它允许用户粘贴 5 位数字，当您添加斜杠时，它将变为 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)}`);

这就是您的代码混乱的地方。如果它包含斜线，那么你应该从 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)}`);

  }

}

Answer 2

使用ngx-mask只需为日期、卡片等提供模式，就可以使您的工作变得轻松。

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

这是stackblitz 演示