仅限数字输入，Angular IE11答案

【问题标题】：Numeric Input Only, Angular IE11仅限数字输入，Angular IE11
【发布时间】：2018-09-10 23:13:32
【问题描述】：

我有一个仅接受数字的输入字段，但这仅适用于 chrome。当我在 IE11 中尝试相同的输入字段时，它接受所有类型的输入。

<input type="number"/>

我也试过了，没有成功。

<input type="text" pattern="[0-9]*"/>

有什么解决方法吗？ IE11 确实很神奇。

自己解决了：

添加

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

然后在我的组件中：

  isNumberKey($event) {
    let charCode = ($event.which) ? $event.which : $event.keyCode;
    console.log('Char code is ---> ', charCode);
    if (charCode > 31 && (charCode < 48 || charCode > 57))
      return false;

    return true;
  }

【问题讨论】：

标签： angular internet-explorer internet-explorer-11

【解决方案1】：

我通过创建一个允许特定字符限制以及仅数字的指令解决了类似的问题。

appName.directive("limitTo", [function() {
return {
    restrict: "A",
    link: function(scope, elem, attrs) {
        var limit = parseInt(attrs.limitTo);
        angular.element(elem).on("keypress", function(e) {
            if (this.value.length == limit) {
                if(e.which != 8){
                    e.preventDefault();
                }
            }
            if((isNaN(String.fromCharCode(e.charCode)) || e.charCode === 32 || e.charCode === 69) && e.which != 8){
                e.preventDefault();
            }
        });
    }
}

这将允许您限制任何不是数字的内容（包括空格、“e”和破折号）。只需将指令“limit-to”添加到字符限制或根本没有。

<input type="number" limit-to="4">

希望这会有所帮助，对于迟到一年的回复感到抱歉。干杯！

【讨论】：

e.keyCode 不是一个可行的解决方案，因为它在 Firefox 中不起作用。 e.charCode 适用于所有浏览器。

【解决方案2】：

你的第二个例子非常接近。这样就可以了：

<input type="text" pattern="^[0-9]*$"/>

【讨论】：

你说得对，我匆忙验证了你的正则表达式，尽管问题与它有关。
为了精确起见，在验证 html 表单时，两种正则表达式模式都可以在 IE11 的 Chrome 中使用。他们不做的是防止输入无效值。