仅 num 的 AngularJs 指令在 IE11 上不起作用答案

【问题标题】：AngularJs directive for only num does not work on IE11仅 num 的 AngularJs 指令在 IE11 上不起作用
【发布时间】：2021-01-03 07:05:40
【问题描述】：

我正在使用一个 angularjs 指令，它应该确保输入字段只接受数字。该指令适用于 Chrome 和 FF，但不适用于 IE11

需要添加什么才能使其工作？或者指令在 IE11 中不起作用？我不确定，但如果有人能够帮助我找出解决方法，或者如果我在代码中犯了错误，那就太好了。

我使用的是版本 11.0.9600.19596 - 更新版本：11.0.170。在这个版本中，我可以在框中键入字母字符，这与它在 Chrome 和 FF 中的行为相反。

我也在 IE11 版本 11.1392.17763.0 更新版本 11.0.205 上尝试过

不知道还要检查什么。

谢谢，

伊拉斯莫

AngularJS for onlynum

app.directive('onlyNum', function () {
        return function (scope, element, attrs) {

            var keyCode = [8, 9, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 110];
            element.bind("keydown", function (event) {
                console.log($.inArray(event.which, keyCode));
                if ($.inArray(event.which, keyCode) == -1) {
                    scope.$apply(function () {
                        scope.$eval(attrs.onlyNum);
                        event.preventDefault();
                    });
                    event.preventDefault();
                }

            });
        };
    });

HTML：

<div class="w-25 p-3">
    <label for="meeting-id">Meeting ID</label>
    <input type="number" ng-model="meetingId" id="meeting-id" ng-trim="true" class="form-control" placeholder="Enter Meeting ID" only-num />
</div>

【问题讨论】：

我试过你的代码，但在 IE11 中没有发现任何问题。我的 IE 版本是 11.1667.17134
@sandeepjoshi - 我使用的是 11.0.9600.19596 版本 - 更新版本：11.0.170。在这个版本中，我可以在框中输入字母字符，这与它在 Chrome 和 FF 中的行为相反。谢谢
@sandeepjoshi - 我也在 IE11 版本 11.1392.17763.0 更新版本 11.0.205 上尝试过
您好，请问这个问题呢？我下面的回答对解决这个问题有帮助吗？如果是这样，您可以参考this，它可以帮助其他社区成员将来解决类似问题。感谢您的理解。
@Yu Zhou - 很抱歉没有及时回复您，我因另一项任务脱轨，我计划测试您的代码，一旦完成，我会尽快回复你。非常感谢您的帮助。

标签： javascript angularjs angularjs-directive internet-explorer-11

【解决方案1】：

我使用下面的代码示例，它可以在 IE 11 和其他浏览器中正常工作：

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
</head>
<body ng-controller="MainCtrl">
    <div class="w-25 p-3">
        <label for="meeting-id">Meeting ID</label>
        <input type="number" ng-model="meetingId" id="meeting-id" ng-trim="true" class="form-control" placeholder="Enter Meeting ID" only-num />
    </div>
    <script>
        var app = angular.module('test', []);

        app.controller('MainCtrl', function ($scope) {
            $scope.name = 'World';
        });

        app.directive('onlyNum', function () {
            return {
                restrict: 'A',
                link: function (scope, elm, attrs, ctrl) {
                    elm.on('keydown', function (event) {
                        if (event.shiftKey) { event.preventDefault(); return false; }
                        if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                            // backspace, enter, escape, arrows
                            return true;
                        } else if (event.which >= 49 && event.which <= 57) {
                            // numbers
                            return true;
                        } else if (event.which >= 96 && event.which <= 105) {
                            // numpad number
                            return true;
                        }
                        else {
                            event.preventDefault();
                            return false;
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>

【讨论】：