In anglejs gibt es alle Funktionen, mit denen nur Zahlen in ein Textfeld wie eingegeben werden können
javascript
ruby-on-rails
angularjs
numeric
Ali Hasan
quelle
quelle
Antworten:
Diese Funktionalität genau das, was Sie brauchen. http://docs.angularjs.org/api/ng.directive:input.number
BEARBEITEN:
Sie können das jquery-Plugin in eine Direktive einbinden. Ich habe hier ein Beispiel erstellt: 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(); } } });
quelle
Dieser Code zeigt das Beispiel, wie die Eingabe von nichtstelligen Symbolen verhindert wird.
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; }); } }; });
quelle
attrs.$set('ngTrim', "false");
vor dem Parser für Whitespaces zu verhindern.HTML
<input type="text" name="number" only-digits>
// Gib einfach 123 ein
.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); } }; });
// Typ: 123 oder 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); } }; });
quelle
Ich habe gerade ng-keypress in der Direktive für meine Eingabe verwendet.
HTML:
<input type="text" ng-keypress="filterValue($event)"/>
JS:
$scope.filterValue = function($event){ if(isNaN(String.fromCharCode($event.keyCode))){ $event.preventDefault(); } };
quelle
Dies ist der einfachste und schnellste Weg, um nur die Zahleneingabe zuzulassen.
<input type="text" id="cardno" placeholder="Enter a Number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' required>
Vielen Dank
quelle
Um ein wenig auf Antons Antwort aufzubauen -
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; }); } }; });
quelle
ngModel.$viewValue = digits
sollten Sie verwenden,ngModel.$setViewValue(digits)
damit es den Rest der ngModelController- und ngForm-Hooks trifft. Ich brauchte dies, da es ein Pflichtfeld war und als ich einen Buchstaben eingab (der nicht angezeigt wurde), wurde das Formular als gültig markiert - falsch.Meine Lösung akzeptiert Kopieren & Einfügen und speichere die Position des Carets. Es wird für die Produktkosten verwendet und erlaubt daher nur positive Dezimalwerte. Kann Refactor sehr einfach sein, um negative oder nur ganzzahlige Ziffern zuzulassen.
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; } }); } }; });
Setzen Sie auf die HTML-Seite:
<input type="text" class="form-control" only-number ng-model="vm.cost" />
quelle
Dies ist die Methode, die für mich funktioniert. Es ist in der Grundlage Samnau anwser sondern ermöglicht das Formular mit einreichen
ENTER
, erhöhen und verringern die Anzahl mitUP
undDOWN
Pfeilen, Ausgabe mitDEL
,BACKSPACE
,LEFT
undRIGHT
, und navigieren Trog Felder mitTAB
. Beachten Sie, dass dies für positive Ganzzahlen wie einen Betrag funktioniert.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(); };
quelle
Basierend auf der djsiz- Lösung, die in eine Richtlinie eingeschlossen ist. HINWEIS: Es werden keine Ziffern verarbeitet, es kann jedoch problemlos aktualisiert werden
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">
quelle
Verwenden Sie einfach HTML5
<input type="number" min="0"/>
quelle
Sie können https://github.com/rajesh38/ng-only-number überprüfen
quelle
Sie könnten so etwas tun: Verwenden Sie ng-pattern mit dem RegExp " / ^ [0-9] + $ / ", was bedeutet, dass nur ganzzahlige Zahlen gültig sind.
<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>
quelle
Diese Lösung akzeptiert nur numerische '.' und '-'
Dies schränkt auch den Leerzeicheneintrag im Textfeld ein. Ich hatte die Richtlinie benutzt, um dasselbe zu erreichen.
Bitte haben Sie die Lösung auf dem folgenden Arbeitsbeispiel.
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(); } }); } }; });
quelle
Es ist einfach und verständlich. Kopieren Sie einfach diesen Code, und Ihr Problem wird behoben. Für weitere Bedingungen ändern Sie einfach den Wert in pattern. Und Ihre Arbeit ist erledigt.
<input type="text" pattern="[0-9]{0,}" oninvalid="this.setCustomValidity('Please enter only numeric value. Special character are not allowed.')" oninput="setCustomValidity('')">
quelle
<input type="phone" numbers-only >
Sie können diesen Weg verwenden, wenn Sie nur Zahlen wollen :)
Hier ist der Demo- Klick
quelle
Ich hatte ein ähnliches Problem und endete mit Hooking und Event
ng-change="changeCount()"
dann:
self.changeCount = function () { if (!self.info.itemcount) { self.info.itemcount = 1; } };
Daher wird der Benutzer standardmäßig auf 1 gesetzt, wenn eine ungültige Nummer eingefügt wird.
quelle
Ich arraged die jQuery in dieser
.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(); } }); } }; })
quelle
<input type="text" ng-keypress="checkNumeric($event)"/> //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(); }
quelle
Ich weiß, dass dies ein alter Beitrag ist, aber diese Anpassung der Antwort von My Mai funktioniert gut für mich ...
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); } }; });
quelle
Ich habe bei getan
.js
$scope.numberOnly="(^[0-9]+$)";
.html
<input type="text" name="rollNo" ng-model="stud.rollNo" ng-pattern="numberOnly" ng-maxlength="10" maxlength="10" md-maxlength="10" ng-required="true" >
quelle
Diese Antwort dient als Vereinfachung und Optimierung gegenüber Leopoldos Antwort .
Lösen Sie bei jedem Tastendruck eine Funktion aus Ihrer Eingabe aus:
<input type="text" ng-keydown="onlyNumbers($event);"/>
Sie können die Funktion auf diese Weise in Ihrem Controller beschreiben
$scope.onlyNumbers = function(event){ // '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 var keys = { 38:true,39:true,40:true,37:true,27:true,8:true,9:true,13:true, 46:true,48:true,49:true, 50:true,51:true,52:true,53:true, 54:true,55:true,56:true,57:true }; // if the pressed key is not listed, do not perform any action if(!keys[event.keyCode]) { event.preventDefault(); } }
Wenn Sie Angular 2+ verwenden, können Sie dieselbe Funktion folgendermaßen aufrufen:
<input type="text" (keydown)="onlyNumbers($event);"/>
Ihre Angular 2+ -Funktion sollte ungefähr so aussehen:
onlyNumbers(event) { // the logic here }
quelle
Verwenden Sie
ng-only-number
diese Option , um nur Zahlen zuzulassen, zum Beispiel:<input type="text" ng-only-number data-max-length=5>
quelle
<input onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || event.charCode == 0 || event.charCode == 46">
quelle