Question

我尝试创建一个允许用户在文本框中输入hh：mm的控件。但是，当用户尝试粘贴无效文本时，我无法正常工作。

虽然用户无法输入非字母数字字符。他们仍然能够粘贴它。

这是我的主机事件，阻止用户输入允许的字符以外的任何字符

@HostListener("keydown", ["$event"])
@HostListener("keyup", ["$event"])
onKeyDown(event: any) {
  let allowedCharacters = `^[0-9-:]*$`;
  const e = event as KeyboardEvent;
    if ([8, 9, 27, 13].indexOf(e.keyCode) !== -1 ||
        //Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        //Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        //home, end, left, right
        (e.keyCode >= 35 && e.keyCode < 39)) {
        return;
    }
    if (!String(e.key).match(allowedCharacters)) {
      event.preventDefault();
    }
}

这是我的ngModelChange事件

 onModelChange(value: any): void {
   this.myTextBoxValue= value;
}

这是我的文本框：

<input type="text" [ngModel] = "myTextBoxValue" (ngModelChange)="onModelChange($event)"

Answer 1

触发粘贴事件

<input type="text" [ngModel] = "myTextBoxValue" (paste)="onPaste($event)" (ngModelChange)="onModelChange($event)"

组件：

onPaste(e: any) { e.preventDefault()}

Answer 2

在你的keydown方法中试试这个：

onKeyDown(event: any) {
   const e = event as KeyboardEvent;
   var charCode = e.keyCode;
   if (charCode > 31 && (charCode < 48 || charCode > 58 )) {
      return false;
   }
      return true;
}

这只允许输入数字和:字符。希望它可以帮助你。

如何防止用户在角度2的文本框中粘贴不正确的值？

2 个答案: