Android KeyUp、KeyDown 和 KeyPress 事件不适用于 Angular2答案

【问题标题】：Android KeyUp, KeyDown, and KeyPress events not working with Angular2Android KeyUp、KeyDown 和 KeyPress 事件不适用于 Angular2
【发布时间】：2018-02-20 05:22:44
【问题描述】：

我在运行时遇到了一个问题

<input type="text" (keydown)="testKeyCodes($event)"/>
<!-- or -->
<input type="text" (keyup)="testKeyCodes($event)"/>

我在 android chrome 浏览器中总是得到 229 的 keyCode，我知道这已经在堆栈溢出中多次提到过，我已经看到了使用建议

&lt;input type="text" (keypress)="testKeyCodes($event)"/&gt;

相反。问题是，android 手机不会触发 keypress 事件。有没有人找到解决方案？

我的最终目标是防止 Android 浏览器上的用户在我的字母数字输入中输入特殊字符。

下面是我要检查的正则表达式。

//tried this
testKeyCodes(event) {
    if (!/[a-zA-Z0-9 ]/.test(event.keyCode) && event.keyCode != '8') {
        event.preventDefault();
    }
}

//and this
testKeyCodes(event) {
    if (!/[a-zA-Z0-9 ]/.test(String.fromCharCode(event.keyCode)) && event.keyCode != '8') {
        event.preventDefault();
    }
}

任何帮助将不胜感激。我完全被卡住了。

【问题讨论】：

Capture keys typed on android virtual keyboard using javascript的可能重复

标签： javascript android html angular events

【解决方案1】：

我会编写一个指令，使用自定义验证器监听 input 事件，如下所示：

....
@HostListener('input',['$event']) 
    onInput($event){
      let newValue = this.el.nativeElement.value;
      ...   
      let patternValidation=newValue.match(myPattern); //replace here with your regexp

      if(patternValidation){
         //keep input
      } else {
         //exclude input
         newValue = patternValidation;
      }

      this.model.control.setValue(newValue);
  }

  <input myDirective [(ngModel)]="value" name="value" >

这是一个粗略的描述，您可能希望更详细。

【讨论】：