javascript - 如何防止用户在 Angular 2 的文本框中粘贴错误的值？

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()}