Android KeyUp、KeyDown和KeyPress事件与Angular2不兼容。

Question

I'm running into an issue where when I run either

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

我在安卓的Chrome浏览器中经常获得一个229的keyCode，我知道这个问题已经多次在stackoverflow上提及过，并且我看到建议使用。

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

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

- BSlink

---

可能是使用JavaScript捕获在Android虚拟键盘上输入的按键的重复问题。 - reyiyo

Answer 1

我会编写一个指令，监听带有自定义验证器的事件，类似以下代码：

....
@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" >

这只是一个粗略的描述，你可能需要将其描述得更加详细。

- Vega