Ik ben een webpagina aan het maken met een tekstveld waarin ik alleen numerieke tekens wil toestaan, zoals (0,1,2,3,4,5...9) 0-9.
Hoe kan ik dit doen met behulp van jQuery?
Note: Dit is een bijgewerkt antwoord. Opmerkingen hieronder verwijzen naar een oude versie die knoeide met keycodes.
Probeer het zelf [op JSFiddle][1].
Er is geen native jQuery implementatie hiervoor, maar je kunt de invoerwaarden van een tekst <input>
filteren met de volgende inputFilter
plugin (ondersteunt Copy+Paste, Drag+Drop, sneltoetsen, context menu operaties, niet-typeerbare toetsen, de caret positie, verschillende toetsenbord lay-outs, en alle browsers sinds 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));
Je kunt nu de inputFilter
plugin gebruiken om een invoer filter te installeren:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Hier zijn nog enkele voorbeelden van invoerfilters die nuttig kunnen zijn:
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
Merk op dat je nog steeds moet valideren aan de server kant!
jQuery is hier eigenlijk niet voor nodig, je kunt hetzelfde ook doen met pure JavaScript. Zie dit antwoord of probeer het zelf [op JSFiddle][4].
HTML 5 heeft een native oplossing met <input type="number">
(zie de specificatie), maar merk op dat browserondersteuning varieert:
step
, min
en max
attributen niet.e
en E
in het veld invoert. Zie ook deze vraag.Probeer het zelf op 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();
}
}
});
});
Bron: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
U kunt deze JavaScript-functie gebruiken:
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;
}
}
}
En je kan het binden aan je tekstvak zoals dit:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Ik gebruik het bovenstaande in productie, en het werkt perfect, en het is cross-browser. Bovendien is het niet afhankelijk van jQuery, dus je kunt het aan je tekstvak binden met inline JavaScript:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>