Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe (<input type=text />
) so einzustellen, dass nur numerische Tastenanschläge (plus '.') erlaubt sind? Nach dem Minimum, ein numerischer Wert nicht am Anfang wie 0.0 erlaubt aber .0* nicht erlaubt
Hinweis: Dies ist eine aktualisierte Antwort. Die Kommentare unten beziehen sich auf eine alte Version, die mit Keycodes herumhantierte.
Versuchen Sie es selbst [auf JSFiddle][1].
Sie können die Eingabewerte eines Textes <input>
mit der folgenden Funktion setInputFilter
filtern (unterstützt Copy+Paste, Drag+Drop, Tastenkombinationen, Kontextmenü-Operationen, nicht eintippbare Tasten, die Cursorposition, verschiedene Tastaturlayouts und alle Browser seit IE 9):
// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
textbox.oldValue = "";
textbox.addEventListener(event, function() {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
});
});
}
Mit der Funktion setInputFilter
kann man nun einen Eingabefilter installieren:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}
Hier sind einige weitere Beispiele für Eingabefilter, die hilfreich sein könnten:
return /^-?\d*$/.test(value); // Integer
return /^\d*$/.test(value); // Integer >= 0
return /^\d*$/.test(value) && // Integer >= 0 and <= 500
(value === "" || parseInt(value) <= 500);
return /^-?\d*[.,]?\d*$/.test(value); // Float (accept both '.' and ',' as decimal separator)
return /^-?\d*[.,]?\d{0,2}$/.test(value); // Currency (i.e. at most two decimal places)
return /^[a-z]*$/i.test(value); // A-Z only
return /^[0-9a-f]*$/i.test(value); // Hexadecimal
Beachten Sie, dass Sie immer noch eine serverseitige Validierung durchführen müssen!
Es gibt auch eine jQuery-Version davon. Siehe diese Antwort oder versuchen Sie es selbst [auf JSFiddle][4].
HTML 5 hat eine native Lösung mit <input type="number">
(siehe die Spezifikation), aber beachten Sie, dass die Browserunterstützung variiert:
step
, min
und max
nicht.Probieren Sie es selbst aus auf w3schools.com.
2 Lösungen:
Verwenden Sie einen Formular-Validator (zum Beispiel mit jQuery validation plugin)
Führen Sie eine Prüfung während des Onblur-Ereignisses (d.h. wenn der Benutzer das Feld verlässt) des Eingabefeldes mit dem regulären Ausdruck durch:
<script type="text/javascript">
function testField(field) {
var regExpr = new RegExp("^\d*\.?\d*$");
if (!regExpr.test(field.value)) {
// Case of error
field.value = "";
}
}
</script>
<input type="text" ... onblur="testField(this);"/>