Question

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

我有一个简单的输入

<input type="number">

我希望它接受仅数字（数字[0-9]），仅此而已。为了实现这一点，我添加了一个事件监听器来控制事件的密钥代码。

没有什么特别的东西，几乎所有平台上的一切都在工作，问题来自于Android。

型=＆＃34;数＆＃34;

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

onkeypress事件：绝对不开火（为什么???）
onkeydown事件：事件触发并调用相关函数。问题是浏览器已经输入了字符（为什么??）因此无法调用＆＃34; preventDefault＆＃34; ＆＃34;事件＆＃34;。
关于输入事件：事件正在触发但是＆＃34;代码＆＃34;和＆＃34;其中＆＃34; ＆＃34;事件＆＃34;的属性对象未定义。此外，与之前一样，浏览器已经输入了字符。

我错过了什么？

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

有人可以建议使用＆＃34; $解析器＆＃34;推送我的自定义值没有不需要的字符。无论如何，我认为这不起作用，因为输入的类型是＆＃34;数字＆＃34;并且它只期望数字（另一种说法是Android上的浏览器做错了...）

这里有一个working Fiddle，在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上测试

Answer 3

使用inputType =“numberSigned”它只会为你提供0-9之间的数字，至少在原生android中它可以完美无缺地工作。

输入中的事件侦听器（onkeypress，onkeydown）在Android数字键盘中不起作用

3 个答案: