输入中的事件侦听器(onkeypress,onkeypown)在Android数字键盘中不起作用

Question

我不知道为什么,但经过几个小时的处理,我可以说有些不对劲.

我有一个简单的输入

<input type="number">

我希望它接受唯一的编号(位[0-9]),仅此而已.为了实现这一点,我添加了一个事件监听器,我在其中控制事件的键码.

没有什么特别的,几乎所有平台上的一切都在工作,问题来自于Android.在这里

类型="数字"

导致数字键盘出现 - 这很棒 - 还有一些其他字符(逗号,点,连字符......).当您按下其中一个特殊字符时,行为很奇怪:

• onkeypress事件:绝对没有开火(为什么???)
• onkeydown事件:事件正在触发并调用相关函数.问题是浏览器已经输入了字符(为什么??)因此无法调用"event"的"preventDefault"函数.
• on input event:事件正在触发,但"event"对象的"code"和"which"属性未定义.而且,和以前一样,浏览器已经输入了字符.

我错过了什么？

我的环境由AngularJs驱动,所以我在一个指令中设置了事件监听器.但是使用jQuery做同样的事情并不能解决问题.

有人可以建议使用"$ parsers"来推送我的自定义值而不需要不需要的字符.无论如何这不起作用我猜,因为输入的类型是"数字",它只期望数字(另一种方式说Android上的浏览器做错了..)

这里有一个工作小提琴,在Android上打开它.

谢谢

Answer 1

该keypress事件不会触发,只有keydown和keyup.onkeydown你可以调用这个preventDefault()方法.但要防止什么？charCode总是0和keyCode是229.你应该检查所有的输入.

像这样的东西:

if(!event.charCode) {
    this.removeInvalidChar();
    return;
}

private removeInvalidChar(): void {
    setTimeout(() => {
        let input = this.control.control.value;

        if (input) {
            input.split('').forEach((char: string) => {
                if (!this.pattern.test(char)) {
                    input = input.replace(char, '');
                }
            });
            this.control.control.setValue(input);
        }
    });
}

Answer 2

这个指令怎么样$parsers.unshift：

app.directive('format', ['$filter', '$window', function($filter, $window) {
  return {
    require: '?ngModel',
    link: function(scope, elem, attrs, ctrl) {

      if (!ctrl) return;

      scope.plainNumber = scope.test+'';

      ctrl.$parsers.unshift(function(viewValue) {         

      if(!viewValue){
         viewValue = scope.plainNumber;
      }
        scope.plainNumber = viewValue.replace(/[^\d]/g, '');

        elem.val(scope.plainNumber);
        return scope.plainNumber;            
      });
    }
  };
}]); 

及用法：

<input type="number" ng-model="test" format /> 

Demo Fiddle

在 Android 上测试