Interdire la saisie de certains caractères en javascript

logo-javascriptAujourd’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.

 

 

Le code HTML

Pour saisir du texte, on utilise naturellement un input de type de text. On va appeller notre future fonction javascript lors de chaque pression de touche du clavier, en passant en paramètre l’objet event.

<input type="text" id="mon_input" onkeypress="verifierCaracteres(event); return false;" />

Notez le return false après notre fonction. Cela permet de bloquer complètement la saisie de texte. C’est donc notre fonction Javascript qui va ajouter le caractère saisi si on le permet.

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.

function verifierCaracteres(event) {
	 		
	var keyCode = event.which ? event.which : event.keyCode;
	var touche = String.fromCharCode(keyCode);
			
	var champ = document.getElementById('mon_input');
			
	var caracteres = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
			
	if(caracteres.indexOf(touche) >= 0) {
		champ.value += touche;
	}
			
}

 

Bien entendu, vous pouvez adapter en fonction de vos besoins la variable listChars qui contient donc ici ce qu’on veut autoriser.

Adaptations

Si vous voulez faire l’inverse, c’est à dire inscrire dans listChars les caractères interdits, modifier la fin du code ainsi :

if(caracteres.indexOf(touche) == -1) {
	champ.value += touche;
}

Votre fonction ajoutera le caractère que si ce dernier n’est donc pas dans listChars.

 

Maintenant, si vous voulez avoir des caractères autorisés ou interdit différents pour le 1er caractère de votre input, il suffit d’étudier l’attribut length de la valeur de l’input.

if(champ.value.length == 0) {
	var caracteres = '0123456789';
}
else {
	var caracteres = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
}

Pour l’exemple ici, si mon input est vide (donc pour le 1er caractère), j’interdis les nombres.

5 commentaires

  • 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…

Laisser un commentaire