如何限制input只接受数字?

我在AngularJS中使用ngChange来触发一个自定义函数,它将删除用户添加到input的任何字母。

<input type="text" name="inputName" data-ng-change="numbersOnly()"/> 

问题是我需要针对触发numbersOnly()的input,以便我可以删除input的字母。 我在Google上看了很久,很难find任何关于这方面的信息。

我能做什么?

简单的方法 ,如果它适用于您的用例,请使用type =“number” :

 <input type="number" ng-model="myText" name="inputName"> 

另一个简单的方法: ng-pattern也可以用来定义一个正则expression式,这个正则expression式会限制这个字段中允许的内容。 另见关于表格的“食谱”页面 。

hackish的? 方法 $在你的控制器中观察ng模型:

 <input type="text" ng-model="myText" name="inputName"> 

控制器:

 $scope.$watch('myText', function() { // put numbersOnly() logic here, eg: if ($scope.myText ... regex to look for ... ) { // strip out the non-numbers } }) 

最好的方法是在指令中使用$ parser。 我不打算重复@ pkozlowski.opensource提供的已经很好的答案,所以这里的链接: https ://stackoverflow.com/a/14425022/215945

所有上述解决scheme都涉及使用ng-model,这使得findthis不必要的。

使用ng-change会导致问题。 请参阅AngularJS – 重置$ scope.value不会更改模板中的值(随机行为)

在文本字段中使用ng-pattern

 <input type="text" ng-model="myText" name="inputName" ng-pattern="onlyNumbers"> 

然后将其包含在您的控制器中

 $scope.onlyNumbers = /^\d+$/; 

所提出的解决scheme都没有为我工作得很好,几个小时后,我终于find了方法。

这是angular度指令:

 angular.module('app').directive('restrictTo', function() { return { restrict: 'A', link: function (scope, element, attrs) { var re = RegExp(attrs.restrictTo); var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/; element[0].addEventListener('keydown', function(event) { if (!exclude.test(event.key) && !re.test(event.key)) { event.preventDefault(); } }); } } }); 

input将如下所示:

 <input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]"> 

正则expression式评估按下的键,而不是值

它也可以很好地处理inputtype="number"因为防止改变它的值,所以密钥从不显示,也不会混淆模型。

这里是我的$parser解决scheme的实现@Mark Rajcokbuild议作为最好的方法。 它本质上是@ pkozlowski.opensource 优秀的$parsing器文本答案,但重写只允许数字。 所有的荣誉都归功于他,这只是为了节省你阅读答案的5分钟,然后重写你自己的:

 app.directive('numericOnly', function(){ return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null; if (transformedInput!=inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } return transformedInput; }); } }; }); 

你会这样使用它:

 <input type="text" name="number" ng-model="num_things" numeric-only> 

有趣的是,除非字母数字包围,否则空格不会到达parsing器,所以您必须根据需要使用.trim() 。 此外,这个parsing器不能<input type="number"> 。 出于某种原因,非数字从来不会将它们传递给parsing器,在那里它们将被移除,但是它们确实将其input到input控件本身中。

有几种方法可以做到这一点。

你可以使用type="number"

 <input type="number" /> 

另外 – 我为此创build了一个可重用的指令 ,使用正则expression式。

HTML

 <div ng-app="myawesomeapp"> test: <input restrict-input="^[0-9-]*$" maxlength="20" type="text" class="test" /> </div> 

使用Javascript

 ;(function(){ var app = angular.module('myawesomeapp',[]) .directive('restrictInput', [function(){ return { restrict: 'A', link: function (scope, element, attrs) { var ele = element[0]; var regex = RegExp(attrs.restrictInput); var value = ele.value; ele.addEventListener('keyup',function(e){ if (regex.test(ele.value)){ value = ele.value; }else{ ele.value = value; } }); } }; }]); }()); 

这里是一个处理任何以上命题不处理的情况。
通过使用$格式化程序和$parsing器pipe道,避免type =“number”

这里是问题/解决scheme的解释(也可在Plunker中获得):

 /* * * Limit input text for floating numbers. * It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals. * min and max attributes can be added. They can be Integers as well as Floating values. * * value needed | directive * ------------------------------------ * 55 | max-integer="2" * 55.55 | max-integer="4" decimal="2" (decimals are substracted from total length. Same logic as database NUMBER type) * * * Input type="number" (HTML5) * * Browser compatibility for input type="number" : * Chrome : - if first letter is a String : allows everything * - if first letter is a Integer : allows [0-9] and "." and "e" (exponential) * Firefox : allows everything * Internet Explorer : allows everything * * Why you should not use input type="number" : * When using input type="number" the $parser pipeline of ngModel controller won't be able to access NaN values. * For example : viewValue = '1e' -> $parsers parameter value = "". * This is because undefined values are not allowes by default (which can be changed, but better not do it) * This makes it impossible to modify the view and model value; to get the view value, pop last character, apply to the view and return to the model. * * About the ngModel controller pipelines : * view value -> $parsers -> model value * model value -> $formatters -> view value * * About the $parsers pipeline : * It is an array of functions executed in ascending order. * When used with input type="number" : * This array has 2 default functions, one of them transforms the datatype of the value from String to Number. * To be able to change the value easier (substring), it is better to have access to a String rather than a Number. * To access a String, the custom function added to the $parsers pipeline should be unshifted rather than pushed. * Unshift gives the closest access to the view. * * About the $formatters pipeline : * It is executed in descending order * When used with input type="number" * Default function transforms the value datatype from Number to String. * To access a String, push to this pipeline. (push brings the function closest to the view value) * * The flow : * When changing ngModel where the directive stands : (In this case only the view has to be changed. $parsers returns the changed model) * -When the value do not has to be modified : * $parsers -> $render(); * -When the value has to be modified : * $parsers(view value) --(does view needs to be changed?) -> $render(); * | | * | $setViewValue(changedViewValue) * | | * --<-------<---------<--------<------ * * When changing ngModel where the directive does not stand : * - When the value does not has to be modified : * -$formatters(model value)-->-- view value * -When the value has to be changed * -$formatters(model vale)-->--(does the value has to be modified) -- (when loop $parsers loop is finished, return modified value)-->view value * | * $setViewValue(notChangedValue) giving back the non changed value allows the $parsers handle the 'bad' value * | and avoids it to think the value did not changed * Changed the model <----(the above $parsers loop occurs) * */ 

DECIMAL

 directive('decimal', function() { return { require: 'ngModel', restrict: 'A', link: function(scope, element, attr, ctrl) { function inputValue(val) { if (val) { var digits = val.replace(/[^0-9.]/g, ''); if (digits.split('.').length > 2) { digits = digits.substring(0, digits.length - 1); } if (digits !== val) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseFloat(digits); } return ""; } ctrl.$parsers.push(inputValue); } }; }); 

DIGITS

 directive('entero', function() { return { require: 'ngModel', restrict: 'A', link: function(scope, element, attr, ctrl) { function inputValue(val) { if (val) { var value = val + ''; //convert to string var digits = value.replace(/[^0-9]/g, ''); if (digits !== value) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseInt(digits); } return ""; } ctrl.$parsers.push(inputValue); } }; }); 

validation号码的angular度指令

我知道这是旧的,但我已经为此目的创build了一个指令,以防有人在寻找一个简单的解决scheme。 使用非常简单。

你可以在这里查看

你可能还想删除在input的开始0 …我只是添加一个if块以上Mordred的答案,因为我还不能发表评论…

  app.directive('numericOnly', function() { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { modelCtrl.$parsers.push(function (inputValue) { var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null; if (transformedInput!=inputValue) { modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); } //clear beginning 0 if(transformedInput == 0){ modelCtrl.$setViewValue(null); modelCtrl.$render(); } return transformedInput; }); } }; }) 

基本和干净的HTML方式

 <input type="number" /> 
  <input type="text" name="profileChildCount" id="profileChildCount" ng-model="profile.ChildCount" numeric-only maxlength="1" /> 

您可以使用数字属性。

这是一个很好的解决scheme,只允许input号码input

 <input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/> 

我最终创build了上面的代码的修改指令,以接受input和dynamic更改格式…

 .directive('numericOnly', function($filter) { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { element.bind('keyup', function (inputValue, e) { var strinput = modelCtrl.$$rawModelValue; //filter user input var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null; //remove trailing 0 if(transformedInput.charAt(0) <= '0'){ transformedInput = null; modelCtrl.$setViewValue(transformedInput); modelCtrl.$render(); }else{ var decimalSplit = transformedInput.split(".") var intPart = decimalSplit[0]; var decPart = decimalSplit[1]; //remove previously formated number intPart = intPart.replace(/,/g, ""); //split whole number into array of 3 digits if(intPart.length > 3){ var intDiv = Math.floor(intPart.length / 3); var strfraction = []; var i = intDiv, j = 3; while(intDiv > 0){ strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3)); j=j+3; intDiv--; } var k = j-3; if((intPart.length-k) > 0){ strfraction[0] = intPart.slice(0,intPart.length-k); } } //join arrays if(strfraction == undefined){ return;} var currencyformat = strfraction.join(','); //check for leading comma if(currencyformat.charAt(0)==','){ currencyformat = currencyformat.slice(1); } if(decPart == undefined){ modelCtrl.$setViewValue(currencyformat); modelCtrl.$render(); return; }else{ currencyformat = currencyformat + "." + decPart.slice(0,2); modelCtrl.$setViewValue(currencyformat); modelCtrl.$render(); } } }); } }; 

})

 <input type="text" ng-model="employee.age" valid-input input-pattern="[^0-9]+" placeholder="Enter an age" /> <script> var app = angular.module('app', []); app.controller('dataCtrl', function($scope) { }); app.directive('validInput', function() { return { require: '?ngModel', scope: { "inputPattern": '@' }, link: function(scope, element, attrs, ngModelCtrl) { var regexp = null; if (scope.inputPattern !== undefined) { regexp = new RegExp(scope.inputPattern, "g"); } if(!ngModelCtrl) { return; } ngModelCtrl.$parsers.push(function(val) { if (regexp) { var clean = val.replace(regexp, ''); if (val !== clean) { ngModelCtrl.$setViewValue(clean); ngModelCtrl.$render(); } return clean; } else { return val; } }); element.bind('keypress', function(event) { if(event.keyCode === 32) { event.preventDefault(); } }); } }}); </script>