Question

我希望用户只允许将数字输入文本框。为此我使用下面的代码：

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

我的输入文本框代码如下：

<input type="text" name="sidNo" class="form-input" placeholder="Enter 5-6 digits"
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required digit-only
ng-pattern="/^[0-9]*$/">

当我输入任何内容时它工作正常。它限制我输入除数字之外。

但问题是，当我的ng-model值profInfo.sidNo来自像AASS001这样的后端，它在文本框中显示为无效输入错误消息，但是当我从退格按钮中删除它时删除退格键的一键按下所有值，并输入两个零，如00

所以请帮我解决这个问题。

我正在使用AngularJS。

Answer 1

最好的方法是使用像@ mpdev7这样的数字，但要结合使用ng-pattern来防止无效字符：

<input type="number" ... etc />

然后你可以为你的Regex创建一个常量，例如：

.constant('allowedSpecialCharactersRegex',
  /^[ a-zA-Z0-9!\"#\$£\%\&'\(\)\*\+\,\-\.\/\:\;\<\=\>\?@\[\\\]\^_\`\{\|\}~]*$/)

然后相应地改变你的模板（注意'vm'假设你的Angular设置如此）：

<input type="number" ... ng-pattern="vm.allowedSpecialCharactersRegex" />

明显改变模式，删除你不想要的字符。

Answer 2

在输入中仅输入数字的最佳方法是使用输入类型=＆＃34;数字＆＃34;，它不是您要找的？

像这样输入

<input type="number" name="sidNo" class="form-input" placeholder="Enter 5-6 digits"
ng-minlength="5" maxlength="6" ng-model="profInfo.sidNo" required">

Answer 3

首先，@ giovani-vercauteren是对的，如果你允许使用无效字符，那么就没有必要使用angular指令了。
但是下面的黑客可以满足你的要求。我希望

var thisApp = angular.module('thisApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

thisApp.controller('MyCtrl',['$scope', function($scope) {
    $scope.btnClick= function(){
    $scope.sidNo='7AASS001';
    }
}]
);

thisApp.directive('digitOnly', [function () {
    return {
        require: 'ngModel',
        scope: {
            digitOnly: '=?'
        },
        link: function (scope, element, attrs, modelCtrl) {
        scope.isBackspacePressed=false;
        element.bind('keydown', function (e, inputs) {

            var code = e.keyCode || e.which;
            var val = element[0].value;

            var current = document.activeElement;
         //Enter all Charcodes u want where u want to prevent keypress
            if (code === 8 || code === 46) {
            scope.isBackspacePressed=true;
                }
        })
            if (scope.digitOnly || scope.digitOnly == undefined) {

                modelCtrl.$parsers.push(function (inputValue) {
                console.log(scope.isBackspacePressed)
                if(scope.isBackspacePressed)  {scope.isBackspacePressed=false; return inputValue;}
                    if (inputValue == undefined) return '';
                    if (attrs.digitOnly == "false") {
                        return inputValue;
                    } else {
                        var transformedInput = inputValue.replace(/[^0-9]/g, '');
                        if (transformedInput != inputValue) {
                            modelCtrl.$setViewValue(transformedInput);
                            modelCtrl.$render();
                        }
                        return transformedInput;
                    }
                });
            }
        }
    };
}])

JSFiddle

AngularJS问题只允许将数字输入到文本框中

3 个答案: