Existe-t-il un moyen rapide de configurer une entrée de texte HTML (<input type=text />
) pour n'autoriser que les frappes numériques (plus ' ;.' ;) ? Après le minimum, une valeur numérique n'est pas autorisée au début, comme 0.0 autorisé mais .0* non autorisé.
Note: Il s'agit d'une réponse mise à jour. Les commentaires ci-dessous se réfèrent à une ancienne version qui manipulait les keycodes.
Essayez vous-même [sur JSFiddle][1].
Vous pouvez filtrer les valeurs d'entrée d'un texte <input>
avec la fonction setInputFilter
suivante (prend en charge le copier-coller, le glisser-déposer, les raccourcis clavier, les opérations du menu contextuel, les touches non dactylographiables, la position du signe d'insertion, les différentes dispositions du clavier et [tous les navigateurs depuis IE 9][2]) :
// 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);
}
});
});
}
Vous pouvez maintenant utiliser la fonction setInputFilter
pour installer un filtre d'entrée :
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}
Voici d'autres exemples de filtres d'entrée qui pourraient vous être utiles :
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
**Notez que vous devez toujours effectuer une validation côté serveur***.
Il existe également une version jQuery de ce système. Voir cette réponse ou essayez-la vous-même [sur JSFiddle][4].
HTML 5 a une solution native avec <input type="number">
(voir la [spécification][5]), mais notez que la prise en charge par les navigateurs varie :
step
, min
et max
.e
et E
dans le champ. Voir également [cette question][7].Essayez vous-même [sur w3schools.com][8].
[1] :
/embedded/result,js,html,css/">[4] : https://jsfiddle.net/emkey08/tvx5e7q3 [5] : https://www.w3.org/TR/html/sec-forms.html#number-state-typenumber [6] : https://caniuse.com/#feat=input-number [7] : https://stackoverflow.com/q/31706611 [8] : http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number
2 solutions :
Utiliser un validateur de formulaire (par exemple avec [jQuery validation plugin][1])
Faire une vérification lors de l'événement onblur (c'est-à-dire lorsque l'utilisateur quitte le champ) du champ de saisie, avec l'expression régulière :
<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);"/>
[1] : http://bassistance.de/jquery-plugins/jquery-plugin-validation/