Discussion :

[Tellounet]

Bonjour à tous,

Je ne connais javascript que de l'utilisation minime que j'en fais et je suis toujours avide d'étendre mon savoir.

Je me demandais s'il existait un événement indiquant que le contenu d'un input text a été modifié par l'utilisateur (ajout ou suppression de caractère par exemple) afin d'y faire des tests.

Merci de partager vos connaissances.

[RomainVALERI]

onchange

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<input type="text" onchange="fonctionMachin();"/>

[Tellounet]

Vraiment?

C'est rigolo, c'est l'événement onChange du select qui m'a inspiré ça et je l'avais testé à tout hasard, sans y croire.

Je vais re-tester avec un poil plus de conviction, merci

[RomainVALERI]

Pour être un peu plus précis quand même : cet événement sera déclenché au moment de la perte de focus, et SI la valeur de l'élément a changé depuis que l'élément a pris le focus.

Si tu avais besoin de déclencher une vérification à chaque caractère saisi, ça ne conviendra pas, il faudra passer par les écouteurs du clavier onkeypress/onkeydown/onkeyup ... ^^

[Tellounet]

Aaaah oui!

Je revenais justement dire que j'avais fait chou blanc.

J'ai déjà une fonction similaire sur le onBlur, mais je voudrais affiner pour ne pas avoir à faire retaper le contenu à l'utilisateur.

Donc oui, onkeypress et compagnie c'est ce qu'il me faut, mais j'ai eu tellement de mal à admettre que je ne réussissais pas à ingérer le tutoriel que j'ai tenté de ruser pour ne pas avoir à récupérer la valeur de la touche pressée.
Donc récupérer le contenu de l'élément une fois le caractère rajouté.

Note que j'ai réussi à passer mon test sur l'élément avant que le caractère ne soit rajouté très utile...


Bon... donc si j'ai bien compris IE et les autres navigateurs n'utiliseront pas la même propriété de l'événement (which/keycode).

Sur le tutoriel suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function detectTouche(e){
    if(parseInt(navigator.appVersion,10) >=4){
        if(navigator.appName == 'Netscape'){ // Pour Netscape, firefox, ...
            document.getElementById('zone').value = String.fromCharCode(e.which);
            document.getElementById('zone1').value = e.which;
        }
        else{ // pour Internet Explorer
            document.getElementById('zone').value = String.fromCharCode(e.keyCode);
            document.getElementById('zone1').value = e.keyCode;
        }
    }
}

,je ne comprends pas la première ligne de la fonction, surtout le rapport avec la valeur '4'.
Ensuite, je ne sais si je dois répéter

if(navigator.appName == 'Netscape')

pour chaque navigateur connu.

et enfin, si j'ai bien compris je récupère là le code de la touche, et je ne sais pas le comparer avec le caractère associé.
Comment par exemple savoir si ce caractère est numérique ou non?

Merci, et désolé du dérangement.

[RomainVALERI]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

String.fromCharCode(e.which)

renvoie une chaine (d'un seul caractère), donc tu peux faire ta comparaison soit par une égalité avec un littéral, genre

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if (String.fromCharCode(e.which) == "K")

, mais vraisemblablement ce n'est pas ce que tu veux : pour un traitement des chaines de caractères, on en vient toujours aux regexp ^^

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
// exemple : n'autoriser que les chiffres :
if (!String.fromCharCode(e.which).match(/[0-9]/)) {
 
   // <<< ICI : traitement de l'erreur (message, clignotement, girophares, pom-pom girls, tout ce que tu veux... ^^
 
   // et à la fin :
   return false; //(pour inhiber le comportement par défaut : ici l'insertion du caractère frappé par l'utilisateur)
}

En ce qui concerne la version du navigateur :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if(parseInt(navigator.appVersion,10) >=4)

compare la valeur de la propriété qui stocke le numéro de version, après conversion en nombre, avec le littéral 4, mais a priori je crois que tu couvriras déjà une grande partie des cas avec une simple distinction IE/non-IE (voir notamment les sources javascript pour cet exemple) ... enfin ça dépend de l'envergure du projet, du parc client si déterminé, etc. ^^

[Tellounet]

Alors j'ai testé, documenté, hasardé, tâtonné, affiché...

Mais je n'y arrive pas vraiment.

Le premier résultat visible est de bloquer totalement toute saisie.
Arriver ailleurs c'est déjà arriver quelque part, non?

Ma fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 function testSaisie(e)
 {
	if(parseInt(navigator.appVersion,10) >=4)
	{
           if(navigator.appName == 'mozilla')
	   {
		if (!String.fromCharCode(e.which).match(/[0-9]/)) 
			return false;
	   }
	   else
	   {
		if (!String.fromCharCode(e.keycode).match(/[0-9]/)) 
			return false;	
	   }
	}
 }

Et le html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" class="Saisie" id="codecreation" maxlength="13" onkeypress="return testSaisie(event);" onBlur="testNumerique();" onselectstart='return false;' />

Donc déjà, je teste avec firefox et ne passe pas dans la boucle "mozilla" mais dans le else.
Ok... l'exemple que tu m'as donné m'a collé un vertige faramineux, je mentirais si je disais qu'il m'a servi

Je devine donc que firefox ne connaissant pas keycode ça ne va pas faire grand chose.

Je teste alors avec explorer, sans plus de succès.
Je me fais afficher String.fromCharCode(e.keycode), qui est vide... pas étonnant donc qu'il ne soit pas dans la regexp.

Je sens que je ne suis pas loin, mais je coince.
Tu aurais encore un petit coup de dégrippant s'il te plaît?

[RomainVALERI]

Attention au "!" qui représente la négation de la condition : tu l'as omis dans le test du caractère pour le cas "if(navigator.appName == 'mozilla')" du coup il annule la saisie SI on saisit un chiffre...

Pas le temps de regarder plus tout de suite (je dois partir) mais demain surement ^^ a+ !

[Tellounet]

En effet, j'ai trituré mon code donc je l'ai recomposé à la hâte pour le ré-afficher ici et l'exclamation m'a échappée.
Je te rassure, ça ne marche pas mieux avec, et de toutes manières ça ne passe pas dans cette boucle

Merci pour ta rapidité et ta patience, je garde la mienne et te souhaite une bonne soirée.

[Tellounet]

Bon déjà... j'ai enfin pigé que navigator.appName == 'Netscape' était vrai quand on est sur firefox (c'était limpide pourtant, je dois mettre de la mauvaise volonté)..

J'ai changé mon fusil d'épaule et je suis bien forcé d'admettre que j'ai résolu en simplifiant puisque je me sers de la valeur de mon élément après avoir ajouté le caractère.

ma fonction js:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function testSaisie(champ)
{ 	
   var v=champ.value;
   if((isNaN(v))||(v=="."))
   {
	var reste=v.substring(0,v.length-1);
        champ.value = reste;
   }
}

Et je l'appelle sur le html avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="codecreation" ... onkeyup="return testSaisie(document.getElementById('codecreation'));" />

Et ça, ça marche au poil puisque tout caractère non numérique est immédiatement 'effacé'.
Je vais pouvoir travailler autour de cette base pour améliorer la convivialité de mon site.

A ce propos, je compte généraliser cette fonction sur une bonne partie de mon projet. Est-il possible de remplacer mon paramètre de fonction par une référence à l'élément en cours?
Je m'explique: je suis dans l'input text d'id="codecreation" et je passe en paramètre document.getElementById('codecreation').
Javascript me permet-il de rappeler l'id de l'élément en cours?
(oui je sais, il me manque pas mal de notions de base )

En tout cas grand merci pour les réponses données et à venir.
La qualité de ce forum et celle de ses habitués ne se dément pas

[RomainVALERI]

A ce propos, je compte généraliser cette fonction sur une bonne partie de mon projet. Est-il possible de remplacer mon paramètre de fonction par une référence à l'élément en cours?
Je m'explique: je suis dans l'input text d'id="codecreation" et je passe en paramètre document.getElementById('codecreation').
Javascript me permet-il de rappeler l'id de l'élément en cours?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" id="codecreation" ... onkeyup="return testSaisie(this);" />

[Tellounet]

Tiens tiens, je l'ai déjà vu quelque part ce this...

C'est niquel, je n'ai plus qu'à copier-coller le onkeyup sur mes nombreux champs concernés. Merci beaucoup M'sieur romain!