angularjs: consente di digitare solo numeri in una casella di testo

In angularjs sono disponibili funzionalità che consentono di digitare solo numeri in una casella di testo

Questa funzionalità è proprio ciò di cui hai bisogno. http://docs.angularjs.org/api/ng.directive:input.number

MODIFICARE:

Puoi avvolgere il plugin jquery in direttiva. Ho creato un esempio qui: http://jsfiddle.net/anazimok/jTJCF/

HTML:

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

Questo codice mostra l’esempio su come impedire l’inserimento di simboli non numerici.

 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 transformsdInput = inputValue.replace(/[^0-9]/g, ''); if (transformsdInput !== inputValue) { modelCtrl.$setViewValue(transformsdInput); modelCtrl.$render(); } return transformsdInput; }); } }; }); 

HTML

   

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

// tipo: 123 o 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); } }; }); 

Ho appena usato ng-keypress nella direttiva per il mio input.

HTML:

  

JS:

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

Questo è il modo più semplice e veloce, per consentire solo l’input del numero.

  

Grazie

Per build un po ‘la risposta di 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; }); } }; }); 

La mia soluzione accetta Copia e incolla e salva la posizione del cursore. Viene utilizzato per il costo dei prodotti, pertanto consente solo valori decimali positivi. Può essere refactator molto facile da consentire cifre negative o solo numeri interi.

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

Metti la pagina html:

  

Basato su soluzione djsiz , racchiuso in direttiva. NOTA: non gestirà i numeri delle cifre, ma può essere facilmente aggiornato

 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

   

Questo è il metodo che funziona per me. Si basa su samnau anwser ma consente di inviare il modulo con ENTER , aumentare e diminuire il numero con le frecce UP e DOWN , l’edizione con DEL , BACKSPACE , LEFT e RIGHT , e navigare tra i campi con TAB . Si noti che funziona per interi positivi come una quantità.

HTML:

 
		      	

Basta usare HTML5

  

Puoi controllare https://github.com/rajesh38/ng-only-number

  1. Limita l’input solo ai numeri e al punto decimale in una casella di testo durante la digitazione.
  2. È ansible limitare il numero di cifre da ammettere prima e dopo il punto decimale
  3. Taglia anche le cifre dopo il punto decimale se il punto decimale viene rimosso dalla casella di testo, ad esempio se hai inserito 123.45 e poi rimuovi il punto decimale, rimuoverà anche le cifre finali dopo il punto decimale e lo creerà 123.

Potresti fare qualcosa del genere: usa ng-pattern con RegExp ” / ^ [0-9] + $ / ” che significa che solo i numeri interi sono validi.

 
The value is not a valid integer

Questa soluzione accetta solo numeri numerici, ‘.’ e ‘-‘

Anche questo limita la voce di spazio sulla casella di testo. Avevo usato la direttiva per ottenere lo stesso risultato.

Si prega di avere la soluzione sotto l’esempio di lavoro.

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

HTML:

 
Value is invalid

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

È semplice e comprensibile. Basta copiare e incollare questo codice e il problema verrà risolto.Per ulteriori condizioni basta cambiare il valore in pattern.e il lavoro sarà fatto.

  

Ho avuto un problema simile e ho finito con l’hooking e l’evento

 ng-change="changeCount()" 

poi:

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

Quindi l’utente è impostato su 1 se è stato inserito un numero non valido.

Ho arrestato il jQuery in questo

 .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(); } }); } }; }) 
   //inside controller $scope.dot = false $scope.checkNumeric = function($event){ if(String.fromCharCode($event.keyCode) == "." && !$scope.dot){ $scope.dot = true } else if( isNaN(String.fromCharCode($event.keyCode))){ $event.preventDefault(); } 

So che questo è un vecchio post ma questo adattamento della risposta di My Mai funziona bene per me …

 angular.module("app").directive("numbersOnly", function() { return { require: "ngModel", restrict: "A", link: function(scope, element, attr, ctrl) { function inputValue(val) { if (val) { //transform val to a string so replace works var myVal = val.toString(); //replace any non numeric characters with nothing var digits = myVal.replace(/\D/g, ""); //if anything needs replacing - do it! if (digits !== myVal) { ctrl.$setViewValue(digits); ctrl.$render(); } return parseFloat(digits); } return undefined; } ctrl.$parsers.push(inputValue); } }; }); 

Ho fatto a

.js

 $scope.numberOnly="(^[0-9]+$)"; 

.html

  

Usa ng-only-number per consentire solo numeri, ad esempio: