Aujourd’hui, j’ai eu besoin d’interdire la saisie de certains caractères en javascript. En reflechissant un peu et en fouinant sur la toile, je suis arrivé à mes fins.
Bien entendu, elle n’exclue pas le contrôle en PHP et n’est pas la seule façon de réaliser cet objectif.
Je vous présente ici ma solution avec quelques explications.
Suite à vos commentaires, j’ai adapté le code en juillet 2024 pour le rendre au goût du jour ! C’est désormais des EventListener et qui fonctionne « plus naturellement ».
Le code HTML
Pour saisir du texte, on utilise naturellement un input de type de text. Je fais l’impasse sur le reste de la page.
<input type="text" id="text_input">Le code Javascript
Dans cet exemple, je permet la saisie des lettres (minuscules et majuscules) ainsi que des chiffres. En clair, j’interdis les caractères spéciaux.
<script>
var caracteresInterdits = /[!@#$%^&*()_+={}\[\];:'"<>,.?/\\|`~]/;
document.getElementById('text_input').addEventListener('keypress', function(event) {
var key = String.fromCharCode(event.which);
if (caracteresInterdits.test(key)) {
event.preventDefault();
}
});
document.getElementById('text_input').addEventListener('input', function(event) {
var inputField = event.target;
inputField.value = inputField.value.replace(caracteresInterdits, '');
});
</script>Bien entendu, vous pouvez adapter en fonction de vos besoins la variable caracteresInterdits qui contient ce qu’on veut… interdire.
Merci pour ce code !
Le texte de l’article parle de listChars, est-ce que ce n’est pas plutôt caracteres ?
J’ai fait l’adaptation pour interdire des caractères, ça marche mais j’ai un résultat bizarre avec la touche d’effacement (backspace) qui affiche un caractère cryptique au lieu d’effacer…
Bon j’ai fait ça qui semble marcher (filtre la saisie des caractères dans la var caracteres) :
function verifierCaracteres(event) {
var keyCode = event.which ? event.which : event.keyCode;
var touche = String.fromCharCode(keyCode);
var caracteres = ‘- ,;/’;
if(caracteres.indexOf(touche) == -1) {
return true;
} else {
return false;
}
}
et dans le input :
onkeypress= »return verifierCaracteres(event); »
Merci pour le code. Ca marche mais du même coup on ne peut plus effacer un caractère si on ce trompe
Merci beaucoup
Bonjour,
Pour que n’importe quel input puisse être concerné j’ai changé dans la fonction :
var champ = document.getElementById(‘mon_input’);
par
var champ = event.target;
Cela dit j’ai le même problème que patheo2patheo :
si je clique en milieu d’input pour corriger ma saisie, les caractères s’affichent en fin de saisie, du coup il est impossible de corriger sans effacer jusqu’au point de correction…