Kuriu tinklalapį, kuriame turiu įvesties teksto lauką, kuriame noriu leisti naudoti tik skaitmeninius simbolius, pavyzdžiui, (0,1,2,3,4,5...9) 0-9.
Kaip tai padaryti naudojant jQuery?
Pastaba: Tai atnaujintas atsakymas. Toliau pateikti komentarai susiję su senąja versija, kurioje buvo naudojami klaviatūros kodai.
Išbandykite patys [JSFiddle][1].
Natyvaus jQuery įgyvendinimo nėra, tačiau galite filtruoti teksto <input>
įvesties reikšmes naudodami šį inputFilter
įskiepį (palaiko Copy+Paste, Drag+Drop, sparčiuosius klavišus, kontekstinio meniu operacijas, neįrašomus klavišus, caret padėtį, skirtingus klaviatūros išdėstymus ir visas naršykles nuo 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));
Dabar galite naudoti inputFilter
įskiepį įvesties filtrui įdiegti:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Štai dar keletas įvesties filtrų pavyzdžių, kurie gali būti naudingi:
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
Atkreipkite dėmesį, kad vis tiek privalote atlikti patvirtinimą serverio pusėje!
Iš tikrųjų jQuery tam nereikia, tą patį galite padaryti ir naudodami grynąjį "JavaScript". Žr. šį atsakymą arba išbandykite patys [JSFiddle][4].
HTML 5 turi vietinį sprendimą su <input type="number">
(žr. specifikaciją), tačiau atkreipkite dėmesį, kad naršyklių palaikymas skiriasi:
step
, min
ir max
.e
ir E
. Taip pat žr. šį klausimą.Išbandykite patys 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();
}
}
});
});
Šaltinis: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Galite naudoti šią "JavaScript" funkciją:
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;
}
}
}
Ją galite susieti su savo tekstiniu langeliu taip:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Aš naudoju tai, kas išdėstyta aukščiau, ir tai puikiai veikia, be to, tai yra tinkama įvairioms naršyklėms. Be to, jis nepriklauso nuo "jQuery", todėl galite jį susieti su tekstiniu langeliu naudodami "JavaScript":
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>