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.

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.

 

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 :

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.

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

4 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

Laisser un commentaire