Angularjs: permet de saisir uniquement des numéros dans une zone de texte

Cette fonctionnalité est exactement ce dont vous avez besoin. http://docs.angularjs.org/api/ng.directive:input.number

MODIFIER:

Vous pouvez envelopper le plugin jquery en directive. J'ai créé un exemple ici: 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(); } } }); 

Ce code montre l'exemple de la façon d'empêcher l'entrée de symboles non numériques.

 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> 

// Tapez 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); } }; }); 

// type: 123 ou 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); } }; }); 

Je viens d'utiliser ng-keypress dans la directive pour mes commentaires.

HTML:

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

JS:

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

C'est le moyen le plus simple et le plus rapide, pour permettre l'entrée du numéro seulement.

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

Merci

Pour s'appuyer un peu sur la réponse d'Anton –

 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; }); } }; }); 

Ma solution accepte Copier et Coller et enregistrer la position du carnet. Il est utilisé pour le coût des produits, ce qui permet uniquement des valeurs décimales positives. Peut être un refactor très facile d'autoriser des chiffres entiers négatifs ou juste.

 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; } }); } }; }); 

Mettez la page html:

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

Basé sur la solution djsiz , enveloppé dans une directive. REMARQUE: il ne gère pas les chiffres, mais il peut être facilement mis à jour

 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"> 

Utilisez simplement HTML5

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

Vous pouvez vérifier https://github.com/rajesh38/ng-only-number

1. Il limite l'entrée aux nombres et aux décimales uniquement dans une zone de texte en tapant.
2. Vous pouvez limiter le nombre de chiffres autorisés avant et après la virgule
3. Il règle également les chiffres après le point décimal si le point décimal est supprimé de la zone de texte, par exemple, si vous avez mis 123.45, puis supprimez le point décimal, il supprimera également les chiffres de fin après le point décimal et le fera 123.

C'est la méthode qui fonctionne pour moi. Il est basé sur samnau anwser mais permet de soumettre le formulaire avec ENTER , augmente et diminue le nombre avec les flèches UP et DOWN , édition avec DEL , BACKSPACE , LEFT et RIGHT , et naviguez dans les champs avec TAB . Notez que cela fonctionne pour des nombres entiers positifs tels qu'un montant.

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(); }; 

Cette solution n'acceptera que les numériques, '.' et '-'

Cela limite également l'entrée d'espace sur la zone de texte. J'avais utilisé la directive pour atteindre la même chose.

Veuillez trouver la solution ci-dessous.

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(); } }); } }; }); 

J'ai eu un problème similaire et j'ai fini par accrocher et organiser

 ng-change="changeCount()" 

puis:

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

Ainsi, l'utilisateur est définitivement défini sur 1 si un numéro invalide est inséré.

Vous pourriez faire quelque chose comme ceci: Utilisez ng-pattern avec le RegExp " / ^ [0-9] + $ / " qui signifie que les nombres entiers sont valides.

 <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> 

J'ai appuyé le jQuery dans cette

 .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(); } }); } }; })