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. ^^