Ist in anglejs eine Funktion verfügbar, mit der nur Zahlen in ein Textfeld eingegeben werden können? mögen
anglejs: erlaubt nur die Eingabe von Zahlen in ein Textfeld
Anton
Dieser Code zeigt das Beispiel, wie Sie die Eingabe von nicht-stelligen Symbolen verhindern können.
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;
});
}
};
});
-
Danke dafür. Ich habe das Nicht-Ziffern-Strippen vereinfacht und einen Test geschrieben: gist.github.com/henrik/769d49136744ddcaa1dc Zum Zeitpunkt des Schreibens ist der Code JS, aber der Test ist CoffeeScript. Bald werden beide CoffeeScript sein, denke ich.
– Henrik N
26. August ’14 um 11:54
-
Wenn Sie doppelt auf eine Buchstabentaste tippen, schlägt dies fehl
– Blowsie
2. September ’15 um 13:57
-
wie Blowsie feststellt, funktioniert dieser Code nicht in allen Fällen.. Hier ist eine funktionierende jsfiddle, die ich versuche, diese Antwort zu aktualisieren, um sie zu verwenden: jsfiddle.net/thomporter/DwKZh
– Ryan Langton
8. Okt. 15 um 20:20 Uhr
-
Die Direktive sollte mit ng-trim=false verwendet werden, wenn Sie die Eingabe von Leerzeichen explizit deaktivieren möchten
– Ewigkeit
25. Juli ’17 um 15:01
-
Die Benutzer können Leerzeichen eingeben. Hinzufügen
attrs.$set('ngTrim', "false");
vor Parsern zum Verhindern von Leerzeichen.– Ahmad Payan
26. November ’17 um 19:09
Mein Mai
HTML
<input type="text" name="number" only-digits>
// Geben Sie 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);
}
};
});
-
Ihr zweites Beispiel (// Typ: 123 oder 123.45) erlaubt die Eingabe mehrerer Dezimalstellen, zB 11.22..33…..444 gibt valid zurück.
– Paul McClean
13. März ’15 um 11:37
-
Ich denke, wir können dies mit dem folgenden tun if (digits.split(‘.’).length > 2) digits = digits.substring(0, digits.length – 1);
– Matt
3. Mai ’15 um 11:45
-
Warum ist der Code in anglejs so lang, wenn er in normalem Javascript für die gleiche Anforderung einfach ist?
– kittu
11. Juni ’15 um 12:57
-
Wie kann ich dies auf nur 2 Ziffern beschränken?
– Bharath
18. August ’16 um 19:29
-
@Bharath für nur 2 Dezimalstellen einschränken –> if (digits.split(‘.’).length > 1) { digits = digits.substring(0, digits.indexOf(‘.’) + 3); }
– Aravinthan K
15. Mai ’18 um 7:09
Ich habe gerade ng-keypress in der Direktive für meine Eingabe verwendet.
HTML-Code:
<input type="text" ng-keypress="filterValue($event)"/>
JS:
$scope.filterValue = function($event){
if(isNaN(String.fromCharCode($event.keyCode))){
$event.preventDefault();
}
};
-
Obwohl dies nicht wirklich “der eckige Weg” ist, scheint es eine relativ sichere Option zu sein, um die Benutzereingabe zu verhindern
– Blowsie
02.09.2015 um 14:00
-
Dies scheint sehr einfach zu sein, obwohl der nicht eckige Weg einiges aufhalten könnte, dieser Ansatz hat mir definitiv gefallen. Musste 2 weitere Fälle hinzufügen, die jedoch erlaubt sein mussten, event.which === 8 und event.which === 46 (für Backspace bzw. Delete)
– Markiv
9. September ’15 um 10:37
-
Schöne Lösung! Ich habe den @Markiv-Kommentar verwendet, um Ihren Code in einer neuen Antwort zu verbessern, die Bearbeitung, Übermittlung und Navigation ermöglicht.
– Leopoldo Sanczyk
6. März ’16 um 5:24
-
Ich mochte diese Lösung, und obwohl der Wert gekürzt ist => Ich habe die Bedingung ein wenig geändert, um das Drücken der Leertaste zu verhindern: if( isNaN(String.fromCharCode($event.keyCode)) || $event.keyCode === 32 )
– Dimi
23. Apr. ’17 um 22:48
-
Das Keypress-Ereignis ist veraltet, einige Browser (insbesondere Chrome) unterstützen es nicht. Das Keydown-Ereignis ist auch faul – auf einigen Geräten, Nexus4, werden keine korrekten Tastencodes gemeldet. Der einzige wirkliche Weg, dies zu tun (afaik), besteht darin, keine Zeichen zu verwenden, sondern den tatsächlichen echten Text.
– Erti-Chris Eelmaa
6. Juni ’17 um 8:10
anazimok
Diese Funktionalität ist genau das, was Sie brauchen. http://docs.angularjs.org/api/ng.directive:input.number
BEARBEITEN:
Sie können das jquery-Plugin in eine Direktive einschließen. Ich habe hier ein Beispiel erstellt: http://jsfiddle.net/anazimok/jTJCF/
HTML-Code:
<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();
}
}
});
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>
Danke
-
Wenn du das in eine Anweisung schreiben könntest, ist es perfekt
– WtFudge
18. April ’16 um 10:16
-
Rücktaste und Löschen funktionieren auch nicht -) Zusätzliche Überprüfung erforderlich
– igorGIS
13. Juli ’16 um 11:52
-
Die Frage ist, nur Zahleneingaben zuzulassen, wenn Sie mehr möchten. Dann kann es natürlich entsprechend angepasst werden. Dies ist also nur ein Vorschlag, keine konkrete Antwort auf alle Probleme.
– Sijan Gurung
1. Dezember ’16 um 13:42
-
Ich denke, das ist der Weg des Schicksals
– Richard Aguirre
29. März ’18 um 20:34
Craig
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;
});
}
};
});
-
Wenn du das in eine Anweisung schreiben könntest, ist es perfekt
– WtFudge
18. April ’16 um 10:16
-
Rücktaste und Löschen funktionieren auch nicht -) Zusätzliche Überprüfung erforderlich
– igorGIS
13. Juli ’16 um 11:52
-
Die Frage ist, nur Zahleneingaben zuzulassen, wenn Sie mehr möchten. Dann kann es natürlich entsprechend angepasst werden. Dies ist also nur ein Vorschlag, keine konkrete Antwort auf alle Probleme.
– Sijan Gurung
1. Dezember ’16 um 13:42
-
Ich denke, das ist der Weg des Schicksals
– Richard Aguirre
29. März ’18 um 20:34
Carlos Toledo
Meine Lösung akzeptiert Copy&Paste und speichert die Position des Carets. Es wird für Produktkosten verwendet und lässt daher nur positive Dezimalwerte zu. Kann sehr einfach umgestaltet werden, 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" />
.
benutze
– Tamil Selvan C
18. Apr. ’13 um 19:16
Es ist für die Validierung. Funktioniert beim Senden des Formulars. Ich möchte dem Benutzer die Eingabe anderer Werte als Zahl / Ganzzahl verbieten texotela.co.uk/code/jquery/numeric
– Ali Hasan
18. Apr. ’13 um 19:26
mögliches Duplikat von Wie beschränke ich eine Eingabe, um nur Zahlen zu akzeptieren?
– Mark Rajcok
19. April ’13 um 15:43