Υπάρχει ένας γρήγορος τρόπος για να ορίσετε μια είσοδο κειμένου HTML (<input type=text />
) να επιτρέπει μόνο αριθμητικές πληκτρολογήσεις (συν '.'); Μετά από ελάχιστο, μια αριθμητική τιμή δεν επιτρέπεται στην αρχή όπως 0.0 επιτρέπεται αλλά .0* δεν επιτρέπεται
Σημείωση: Αυτή είναι μια ενημερωμένη απάντηση. Τα σχόλια παρακάτω αναφέρονται σε μια παλιά έκδοση που μπέρδευε τους κωδικούς κλειδιών.</sup>,
Δοκιμάστε το μόνοι σας [στο JSFiddle][1].
Μπορείτε να φιλτράρετε τις τιμές εισόδου ενός κειμένου <input>
με την ακόλουθη συνάρτηση setInputFilter
(υποστηρίζει Copy+Paste, Drag+Drop, συντομεύσεις πληκτρολογίου, λειτουργίες του μενού περιβάλλοντος, μη πληκτρολογήσιμα πλήκτρα, τη θέση του caret, διαφορετικές διατάξεις πληκτρολογίου και όλα τα προγράμματα περιήγησης από τον 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);
}
});
});
}
Μπορείτε τώρα να χρησιμοποιήσετε τη συνάρτηση setInputFilter
για να εγκαταστήσετε ένα φίλτρο εισόδου:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' 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. Δείτε αυτή την απάντηση ή δοκιμάστε το μόνοι σας [στο JSFiddle][4].
Η HTML 5 έχει μια εγγενή λύση με την <input type="number">
(δείτε την προδιαγραφή), αλλά σημειώστε ότι η υποστήριξη του προγράμματος περιήγησης ποικίλλει:
step
, min
και max
.e
και E
στο πεδίο. Δείτε επίσης αυτή την ερώτηση.Δοκιμάστε το μόνοι σας στο w3schools.com.
2 λύσεις:
Κάντε έναν έλεγχο κατά τη διάρκεια του συμβάντος onblur (δηλαδή όταν ο χρήστης εγκαταλείπει το πεδίο) του πεδίου εισόδου, με την κανονική έκφραση:
<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);"/>