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

【问题标题】：How to prevent user from pasting incorrect value in a text box in angular 2?如何防止用户在 Angular 2 的文本框中粘贴不正确的值？
【发布时间】：2018-05-03 05:08:49
【问题描述】：

我正在尝试创建一个允许用户在文本框中输入 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)"

【问题讨论】：

你为什么要拦截击键而不是仅仅过滤在 onModelChange 中接收到的值？
@bryan60，因为我希望 invalid 击键甚至不是“可键入的”？我不认为我们可以通过 onModelChange 实现这一目标。
您应该按照我的建议尝试一下。它会发生得如此之快，以至于它似乎根本没有发生。

标签： javascript angular

【解决方案1】：

触发粘贴事件

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

组件：

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

【讨论】：

【解决方案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;
}

这只允许输入数字和: char。希望对你有帮助。

【讨论】：