javascript - Android KeyUp、KeyDown 和 KeyPress 事件不适用于 Angular2

Question

我遇到一个问题，当我运行时

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

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

<input type="text" (keypress)="testKeyCodes($event)"/>

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

我的最终目标是防止 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();
    }
}

任何帮助将不胜感激。我完全陷入困境。

Answer 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" >

这是一个粗略的描述，您可能需要使其更详细。