11544 sujets

JavaScript, DOM et API Web HTML5

Autoriser seulement les caractères alphanumérique sur un input

Salut,

Voila je cherche a faire la même chose que sur le formulaire d'inscription de twitter avec le champ "Nom d'utilisateur", seul les caractères alphanumérique et quelques autres caractères sans autoriser.

il y'a pas mal de tuto qui propose des solution pour ça, mais ils ont tous un point en commun, il ajoute tous l'attribut "onkeypress" a l'intérieur de l'input coté html, ça donne quelque chose du genre 

<input type="text" onKeyPress="return VinCheck(event);"/>

comme avec ce tutoriel http://www.nazmulweb.com/works/javascript/alphanumeric.aspx (en)

ça marche très bien, mais qu'on j'enlève donc l'attribut onkeypress de l'input et que j'attache l'évènement coté javascript avec addEventListener ou autres, ça plante, ça marche pas.

sur le formulaire de twitter on vois très bien qu'il n'y a pas d'attribut onkeypress, donc l'évènement est bien attaché avec addEventListener.

Merci de bien vouloir m'éclairé sur la fonction ou les modification qu'ils faut, ou de me diriger vers un tuto qui traite ce problème.
Modifié par cool-man (28 Nov 2010 - 00:29)
Essaie avec onkeydown plutôt qu'onkeypress.
Fais également attention à autoriser les caractères de contrôle: ctrl, alt, shift, escape, flèches, tab, home, end, entrée... c'est vite oublié et c'est très important. D'une manière générale leur code est <32.
Salut,

même constat avec onkeydown, voila mon code 


monInput = document.getElementById('monInput');
monInput.addEventListener('keydown', validate, false);

function validate(e)
      {
      return false;
      }




<input type="text" id="monInput"/>


la normalement je ne pourai rien écrire sur monInput, puisque la fonction returne tous le temps false, mais ça marche pas.
Quand tu utilise cette interface de gestionnaire d'évènement ce n'est pas return false qu'il faut utiliser, mais la méthode preventDefault() de ton évènement.

monInput = document.getElementById('monInput'); 
monInput.addEventListener('keydown', validate, false); 
 
function validate(e) 
      { 
      e.preventDefault(); 
      }
Salut,

Merci MonsieurY, effectivement ta méthode marche très bien, j'ai aussi ajouter "event.returnValue = false" pour ie.
Sujet clos
Aller à