Ich erstelle eine Webseite, in der ich ein Textfeld habe, in dem ich nur numerische Zeichen wie (0,1,2,3,4,5...9) 0-9 zulassen möchte.
Wie kann ich dies mit jQuery tun?
Hinweis: Dies ist eine aktualisierte Antwort. Die Kommentare unten beziehen sich auf eine alte Version, die mit Keycodes herumspielte.
Versuchen Sie es selbst [auf JSFiddle][1].
Es gibt keine native jQuery-Implementierung dafür, aber Sie können die Eingabewerte eines Textes <input>
mit dem folgenden inputFilter
-Plugin filtern (unterstützt Copy+Paste, Drag+Drop, Tastenkombinationen, Kontextmenü-Operationen, nicht-tippbare Tasten, die Caret-Position, verschiedene Tastatur-Layouts und alle Browser seit IE 9):
// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
$.fn.inputFilter = function(inputFilter) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop", 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);
}
});
};
}(jQuery));
Mit dem Plugin inputFilter
kann man nun einen Eingabefilter installieren:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits 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!
jQuery ist dafür eigentlich nicht nötig, Sie können das Gleiche auch mit reinem JavaScript machen. 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 auf w3schools.com.
$(document).ready(function() {
$("#txtboxToFilter").keydown(function(event) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57 ) {
event.preventDefault();
}
}
});
});
Quelle: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Sie können diese JavaScript-Funktion verwenden:
function maskInput(e) {
//check if we have "e" or "window.event" and use them as "event"
//Firefox doesn't have window.event
var event = e || window.event
var key_code = event.keyCode;
var oElement = e ? e.target : window.event.srcElement;
if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
if ((key_code > 47 && key_code < 58) ||
(key_code > 95 && key_code < 106)) {
if (key_code > 95)
key_code -= (95-47);
oElement.value = oElement.value;
} else if(key_code == 8) {
oElement.value = oElement.value;
} else if(key_code != 9) {
event.returnValue = false;
}
}
}
Und Sie können sie wie folgt an Ihr Textfeld binden:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Ich verwende die obige Methode in der Produktion, und sie funktioniert perfekt und ist browserübergreifend. Außerdem ist es nicht von jQuery abhängig, so dass Sie es mit Inline-JavaScript an Ihr Textfeld binden können:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>