Δημιουργώ μια ιστοσελίδα όπου έχω ένα πεδίο εισαγωγής κειμένου στο οποίο θέλω να επιτρέπω μόνο αριθμητικούς χαρακτήρες όπως (0,1,2,3,4,5...9) 0-9.
Πώς μπορώ να το κάνω αυτό χρησιμοποιώντας την jQuery;
Σημείωση: Αυτή είναι μια ενημερωμένη απάντηση. Τα σχόλια παρακάτω αναφέρονται σε μια παλιά έκδοση που μπέρδευε τους κωδικούς κλειδιών.</sup>,
Δοκιμάστε το μόνοι σας [στο JSFiddle][1].
Δεν υπάρχει εγγενής υλοποίηση της jQuery γι' αυτό, αλλά μπορείτε να φιλτράρετε τις τιμές εισόδου ενός κειμένου <input>
με το ακόλουθο πρόσθετο inputFilter
(υποστηρίζει Copy+Paste, Drag+Drop, συντομεύσεις πληκτρολογίου, λειτουργίες του μενού περιβάλλοντος, μη πληκτρολογήσιμα πλήκτρα, τη θέση του caret, διαφορετικές διατάξεις πληκτρολογίου και όλα τα προγράμματα περιήγησης από τον 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));
Μπορείτε τώρα να χρησιμοποιήσετε το πρόσθετο inputFilter
για να εγκαταστήσετε ένα φίλτρο εισόδου:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
});
});
Ακολουθούν μερικά ακόμη παραδείγματα φίλτρων εισόδου που μπορεί να σας φανούν χρήσιμα:
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
Σημειώστε ότι εξακολουθείτε να πρέπει να κάνετε επικύρωση από την πλευρά του διακομιστή!
Η jQuery δεν είναι απαραίτητη για αυτό, μπορείτε να κάνετε το ίδιο πράγμα και με καθαρή JavaScript. Δείτε αυτή την απάντηση ή δοκιμάστε το μόνοι σας [στο JSFiddle][4].
Η HTML 5 έχει μια εγγενή λύση με την <input type="number">
(δείτε την προδιαγραφή), αλλά σημειώστε ότι η υποστήριξη του προγράμματος περιήγησης ποικίλλει:
step
, min
και max
.e
και E
στο πεδίο. Δείτε επίσης αυτή την ερώτηση.Δοκιμάστε το μόνοι σας στο 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();
}
}
});
});
Πηγή: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values
Μπορείτε να χρησιμοποιήσετε αυτή τη συνάρτηση JavaScript:
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;
}
}
}
Και μπορείτε να τη δεσμεύσετε στο πλαίσιο κειμένου σας ως εξής:
$(document).ready(function() {
$('#myTextbox').keydown(maskInput);
});
Χρησιμοποιώ τα παραπάνω στην παραγωγή, και λειτουργεί τέλεια, και είναι cross-browser. Επιπλέον, δεν εξαρτάται από το jQuery, οπότε μπορείτε να το δεσμεύσετε στο πλαίσιο κειμένου σας με inline JavaScript:
<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>