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

问题描述：

我希望用户只允许将数字输入到文本框中。对于这个我使用下面的代码：下面AngularJS问题只允许将数字输入到文本框中

.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模型值profInfo.sidNo来自后端像AASS001那样显示我在文本框上的无效输入错误消息是正确的，但是当我从退格按钮中删除此值时，删除所有值在单键退格键和输入两个零像00

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

我正在使用AngularJS。

你到底要什么固定的吗？输入做它所需要的，它删除所有无效的字符。你在问如何让无效字符留下来，完全击败了指令的目的？ –

@GiovaniVercauteren我想要清空文本框的值，如果有任何无效的字符只有当我复制粘贴一些字母数字文本时才会发现。 – user3441151

答

首先，@ giovani-vercauteren是正确的，如果你允许无效字符，那么没有使用角度指令的要点。
但下面的黑客可以满足您的要求。我希望

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

答

在输入中只输入数字的最好方法是使用input type =“number”，这不是你要找的？

输入这样

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

此方法允许用户输入无效字符，但不会正确验证。所做的指令OP甚至不允许用户输入无效字符，它们立即被删除。 –

答

最好的方法是使用数字，如@ mpdev7说，但与它一起使用NG模式，以防止无效字符：

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

然后你会为你的正则表达式创建一个像这样的常量：

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

然后改变你的t因此emplate（注意“VM”假设你有你的角度设立这样的）：

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

改变格局明显，删除你不想要个字符。

我想空白输入文本框，如果有任何一个字符除数字只有当我复制粘贴一些字母数字文本。 – user3441151

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

相关推荐