angularjs:只允许将数字input到文本框中

在angularjs中有任何可用的function,只允许将数字input到文本框中

这个function就是你所需要的。 http://docs.angularjs.org/api/ng.directive:input.number

编辑:

你可以将jquery插件包装成指令。 我在这里创build了一个例子: http : //jsfiddle.net/anazimok/jTJCF/

HTML:

<div ng-app="myApp"> <div> <input type="text" min="0" max="99" number-mask="" ng-model="message"> <button ng-click="handleClick()">Broadcast</button> </div> </div> 

CSS:

 .ng-invalid { border: 1px solid red; } 

JS:

 // declare a module var app = angular.module('myApp', []); app.directive('numberMask', function() { return { restrict: 'A', link: function(scope, element, attrs) { $(element).numeric(); } } }); 

此代码显示如何防止input非数字符号的示例。

 angular.module('app'). directive('onlyDigits', function () { return { restrict: 'A', 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; }); } }; }); 

HTML

  <input type="text" name="number" only-digits> 

//只需键入123

  .directive('onlyDigits', 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 !== val) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseInt(digits,10); } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

//types:123或123.45

  .directive('onlyDigits', 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 undefined; } ctrl.$parsers.push(inputValue); } }; }); 

我只是在input的指令中使用了ng-keypress。

HTML:

 <input type="text" ng-keypress="filterValue($event)"/> 

JS:

 $scope.filterValue = function($event){ if(isNaN(String.fromCharCode($event.keyCode))){ $event.preventDefault(); } }; 

这是最简单和最快的方法,只允许input数字。

 <input type="text" id="cardno" placeholder="Enter a Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required> 

谢谢

安东的答案有点基础上 –

 angular.module("app").directive("onlyDigits", function () { return { restrict: 'EA', require: '?ngModel', scope:{ allowDecimal: '@', allowNegative: '@', minNum: '@', maxNum: '@' }, link: function (scope, element, attrs, ngModel) { if (!ngModel) return; ngModel.$parsers.unshift(function (inputValue) { var decimalFound = false; var digits = inputValue.split('').filter(function (s,i) { var b = (!isNaN(s) && s != ' '); if (!b && attrs.allowDecimal && attrs.allowDecimal == "true") { if (s == "." && decimalFound == false) { decimalFound = true; b = true; } } if (!b && attrs.allowNegative && attrs.allowNegative == "true") { b = (s == '-' && i == 0); } return b; }).join(''); if (attrs.maxNum && !isNaN(attrs.maxNum) && parseFloat(digits) > parseFloat(attrs.maxNum)) { digits = attrs.maxNum; } if (attrs.minNum && !isNaN(attrs.minNum) && parseFloat(digits) < parseFloat(attrs.minNum)) { digits = attrs.minNum; } ngModel.$viewValue = digits; ngModel.$render(); return digits; }); } }; }); 

我的解决scheme接受复制和粘贴并保存插入符的位置。 它用于产品的成本,所以只允许正数十进制值。 可以重构非常容易,允许负数或只是整数。

 angular .module("client") .directive("onlyNumber", function () { return { restrict: "A", link: function (scope, element, attr) { element.bind('input', function () { var position = this.selectionStart - 1; //remove all but number and . var fixed = this.value.replace(/[^0-9\.]/g, ''); if (fixed.charAt(0) === '.') //can't start with . fixed = fixed.slice(1); var pos = fixed.indexOf(".") + 1; if (pos >= 0) //avoid more than one . fixed = fixed.substr(0, pos) + fixed.slice(pos).replace('.', ''); if (this.value !== fixed) { this.value = fixed; this.selectionStart = position; this.selectionEnd = position; } }); } }; }); 

放在html页面上:

 <input type="text" class="form-control" only-number ng-model="vm.cost" /> 

基于djsiz解决scheme,包装在指令。 注:它不会处理数字,但它可以很容易地更新

 angular .module("app") .directive("mwInputRestrict", [ function () { return { restrict: "A", link: function (scope, element, attrs) { element.on("keypress", function (event) { if (attrs.mwInputRestrict === "onlynumbers") { // allow only digits to be entered, or backspace and delete keys to be pressed return (event.charCode >= 48 && event.charCode <= 57) || (event.keyCode === 8 || event.keyCode === 46); } return true; }); } } } ]); 

HTML

  <input type="text" class="form-control" id="inputHeight" name="inputHeight" placeholder="Height" mw-input-restrict="onlynumbers" ng-model="ctbtVm.dto.height"> 

只需使用HTML5

 <input type="number" min="0"/> 

你可以查看https://github.com/rajesh38/ng-only-number

  1. 它在input时将input限制在文本框中的数字和小数点。
  2. 您可以限制小数点前后要允许的位数
  3. 如果从文本框中删除小数点,它还会修整小数点后的数字,例如,如果已经input了123.45,然后删除小数点,它也将删除小数点后的数字,并使其成为123。

这是适合我的方法。 它以samnau anwser为基础,但允许使用ENTER提交表单,使用UPDOWN箭头增加和减less数字,使用DELBACKSPACELEFTRIGHT ,使用TAB导航槽字段。 请注意,它适用于数量等正整数。

HTML:

 <input ng-keypress="onlyNumbers($event)" min="0" type="number" step="1" ng-pattern="/^[0-9]{1,8}$/" ng-model="... > 

ANGULARJS:

 $scope.onlyNumbers = function(event){ var keys={ 'up': 38,'right':39,'down':40,'left':37, 'escape':27,'backspace':8,'tab':9,'enter':13,'del':46, '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57 }; for(var index in keys) { if (!keys.hasOwnProperty(index)) continue; if (event.charCode==keys[index]||event.keyCode==keys[index]) { return; //default event } } event.preventDefault(); }; 

你可以这样做:在RegExp中使用ng-pattern/ ^ [0-9] + $ / ”,这意味着只有整数才是有效的。

 <form novalidate name="form"> <input type="text" data-ng-model="age" id="age" name="age" ng-pattern="/^[0-9]+$/"> <span ng-show="form.age.$error.pattern">The value is not a valid integer</span> </form> 

此解决scheme将只接受数字,“。” 和' – '

这也限制了文本框上的空间input。 我曾经使用这个指令来达到同样的效果。

请在下面的工作示例中find解决scheme。

http://jsfiddle.net/vfsHX/2697/

HTML:

 <form ng-app="myapp" name="myform" novalidate> <div ng-controller="Ctrl"> <input name="number" is-number ng-model="wks.number"> <span ng-show="!wks.validity">Value is invalid</span> </div> 

JS:

 var $scope; var app = angular.module('myapp', []); app.controller('Ctrl', function($scope) { $scope.wks = {number: 1, validity: true} }); app.directive('isNumber', function () { return { require: 'ngModel', link: function (scope, element, attrs, ngModel) { element.bind("keydown keypress", function (event) { if(event.which === 32) { event.returnValue = false; return false; } }); scope.$watch(attrs.ngModel, function(newValue,oldValue) { var arr = String(newValue).split(""); if (arr.length === 0) return; if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.' )) return; if (arr.length === 2 && newValue === '-.') return; if (isNaN(newValue)) { //scope.wks.number = oldValue; ngModel.$setViewValue(oldValue); ngModel.$render(); } }); } }; }); 

我有一个类似的问题,并最终挂钩和事件

 ng-change="changeCount()" 

然后:

 self.changeCount = function () { if (!self.info.itemcount) { self.info.itemcount = 1; } }; 

所以如果插入一个无效号码,用户默认为1。

我在这里安排了jQuery

 .directive('numbersCommaOnly', function(){ return { require: 'ngModel', link: function (scope, element, attrs, ngModel) { element.on('keydown', function(event) { // Allow: backspace, delete, tab, escape, enter and . var array2 = [46, 8, 9, 27, 13, 110, 190] if (array2.indexOf(event.which) !== -1 || // Allow: Ctrl+A (event.which == 65 && event.ctrlKey === true) || // Allow: Ctrl+C (event.which == 67 && event.ctrlKey === true) || // Allow: Ctrl+X (event.which == 88 && event.ctrlKey === true) || // Allow: home, end, left, right (event.which >= 35 && event.which <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((event.shiftKey || (event.which < 48 || event.which > 57)) && (event.which < 96 || event.which > 105)) { event.preventDefault(); } }); } }; }) 

使用ng-only-number允许数字,例如:

 <input type="text" ng-only-number data-max-length=5> 

这很简单,可以理解。 只要复制粘贴这个代码,你的问题将得到解决。更多的条件只是改变pattern.and的价值,你的工作就完成了。

 <input type="text" pattern="[0-9]{0,}" oninvalid="this.setCustomValidity('Please enter only numeric value. Special character are not allowed.')" oninput="setCustomValidity('')">