javascript - AngularJS 限制输入数字不起作用

Question

我的 html 页面上有一个输入框，其中将数据绑定(bind)到 ng-model。我使用指令将输入字段限制为仅包含数字。我无法使用默认的 HTML5 限制，例如 type="number"。我遇到的问题是，如果输入两次非数字字符，例如按 123，然后按两次 k，则 k 会添加到 123，从而得到 123k。但是，当我按下另一个键时，k 会被指令删除。

有人可以帮我解决按同一个键两次时出现字母的问题吗

我使用的指令:

angular.module('app').
directive('onlyDigits', function () {

return {
    restrict: 'A',
    require: '?ngModel',
    link: function (scope, element, attrs, ngModel) {
        if (!ngModel) return;
        ngModel.$parsers.unshift(function (inputValue) {
            var digits = inputValue.split('').filter(function (s) { return (!isNaN(s) && s != ' '); }).join('');
            ngModel.$viewValue = digits;
            ngModel.$render();
            return digits;
        });
    }
};

});

Answer 1

这是我们仅在指令中用来实现数字的方法:

directives.directive('numbersOnly', function () {
    'use strict';
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function (inputValue) {
                if (inputValue === undefined) {
                    return '';
                }
                var transformedInput = inputValue.replace(/[^0-9]/g, '');
                if (transformedInput !== inputValue) {
                    modelCtrl.$setViewValue(transformedInput);
                    modelCtrl.$render();
                }
                return transformedInput;
            });
        }
    };
});