Question

I'm using a mixture of JS key events and AngularJS to prevent the user from entering non-numeric keys in an input field (via a directive). While the following works in Firefox and Chrome, Internet Explorer seems to ignore these events:

app.directive("numberField", function ()
{
    return {
        restrict: "E",
        scope:
        { },
        link: function (scope, element, attrs, ctrl)
        {
            $(element).on('keydown', function (event)
            {
                var key = event.which || event.keyCode;

                if (!event.shiftKey && !event.altKey && !event.ctrlKey &&
                    // numbers  
                    key >= 48 && key <= 57 ||
                    // Numeric keypad
                    key >= 96 && key <= 105 ||
                    // Backspace and Tab and Enter
                   key == 8 || key == 9 || key == 13 ||
                    // Home and End
                   key == 35 || key == 36 ||
                    // left and right arrows
                   key == 37 || key == 39 ||
                    // Del and Ins
                   key == 46 || key == 45 ||
                    //Period and Decimal Point
                   key == 110 || key == 190)
                    return true;

                return false;
            });
        },
        templateUrl: "DirectiveTemplate/NumberField"
    };
});

There are AngularJS directives like ng-keyup and ng-keydown as well which are similarly ignored, but any other AngularJS functionality such as watches work fine. Is there some compatibility issue with IE11 that I'm not aware of? Or has anyone discovered a workaround for this issue?

Was it helpful?

Solution

It turns out this was a case of poor attribute naming on my part. I was using "disabled" as an attribute to be passed as a parameter to the directive, and IE could not differentiate between the standard HTML disable and my custom attribute for the directive. Renaming solved the issue.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top