AngularJs directive for only num does not work on IE11
Question
I am using an angularjs directive that should ensure that an input field only accepts numbers. The directive works on Chrome and FF, but it does not work on IE11
What does need to be added to make it work? or directives don't work in IE11? I am not sure, but if anyone would be able to help me out figuring out a work around, or if I am making a mistake in the code, that would be nice.
I am on version 11.0.9600.19596 - Update Versions: 11.0.170. In this version, I can type alphabetical characters inside the box, contrary to how it behaves in Chrome and FF.
I also tried it on IE11 Version 11.1392.17763.0 Update Version 11.0.205
Not sure what else to check.
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>
1 answers
solution1
1 ACCPTED 2020-09-17 08:38:59
I use below code sample and it can work well in IE 11 and other browsers:
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.