The AngularJs directive designed specifically for numerical values is not functioning properly in Internet Explorer 11

Question

The AngularJs directive designed specifically for numerical values is not functioning properly in Internet Explorer 11

I've encountered an issue with an AngularJS directive that is supposed to restrict an input field to only accept numbers. Strangely, the directive functions properly in Chrome and Firefox but fails in IE11.

Does anyone know what needs to be added to fix this problem? Or is it possible that directives simply don't work as intended in IE11? Any assistance in finding a workaround or identifying any errors in the code would be highly appreciated.

The version of IE11 I am using is 11.0.9600.19596 - Update Versions: 11.0.170. In this particular version, I am able to type alphabetical characters into the input box, which differs from the behavior observed in Chrome and Firefox.

I also tested it on IE11 Version 11.1392.17763.0 Update Version 11.0.205

Not sure what else to investigate.

Thank you,

Erasmo

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>

javascript angularjs angularjs-directive internet-explorer-11

Answer 1

Answer №1

This code snippet has been tested and works successfully on IE 11 as well as other browsers:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71101f16041d10035f1b0231405f455f09">[email protected]</a>" 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>

Answer 2

This code snippet has been tested and works successfully on IE 11 as well as other browsers:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71101f16041d10035f1b0231405f455f09">[email protected]</a>" 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>

The AngularJs directive designed specifically for numerical values is not functioning properly in Internet Explorer 11

Answer №1

Similar questions

Transferring information in Laravel with the help of Axios and Vue Framework

What is the process of developing a straightforward Node.js script to encapsulate a binary or executable file?

Retrieving the request body in AWS Lambda

The data in Next.js getStaticProps does not update or refresh as expected

Convert the PHP datetime and timezone function to a JavaScript function

Which is the better choice: utilizing object literals or constructor functions?

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Start by executing the function and then proceed to upload a static file

Emphasize specific lines within a textarea

Is it possible to transmit the survey findings through a telegram?

AngularJS, encountering issues with resolving an unknown provider

Angular Array -- combining numerous data points within a single entity

Transfer information from an Express route to a function exported from a Node module

The Access-Control-Allow-Headers request header field is not permitted as per the Access-Control-Allow-Headers directive

What is the best way to extract properties from JSON data using Javascript?

Troubleshooting Java REST service integration in AngularJS for UPDATE and DELETE operations

Experiencing an anonymous condition post onChange event in a file input of type file - ReactJS

Using a for loop in Javascript with a specified increment value

Updating a Texture Image in Three.js

Is there a way to specify the login response details when making an Angular API request?