问题描述
我正在使用angularjs指令，该指令应确保输入字段仅接受数字。 该指令适用于Chrome和FF，但不适用于IE11
需要添加什么才能使其正常工作？或指令在IE11中不起作用？我不确定，但是如果有人能够帮助我解决问题，或者如果我在代码中犯了一个错误，那就太好了。
我的版本为11.0.9600.19596-更新版本：11.0.170。在此版本中，我可以在框中输入字母字符，这与Chrome和FF中的行为相反。
我也在IE11 11.1392.17763.0更新版本11.0.205上尝试过
不确定要检查什么。
谢谢
Erasmo
AngularJS仅用于数字
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>
解决方法
我使用下面的代码示例，它可以在IE 11和其他浏览器中很好地工作：
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="utf-8" />
<title></title>
<script data-require="[email protected]" 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>