Discussion :

[KinderCountry]

Bonjour, j'ai un soucis avec une petite fonction. Je vous écris le code :

donc mon HTML :

Code html :

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

<input type="text" id="idInput" onkeydown="active(this)" />

et ma fonction Js avec jQuery :

Code :

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

1
2
3
4
5
6
7
8
9
function active(objet){
        jQuery('#' + objet.id).keydown(
                function(e){
//on est tous d'accord sur le fait que 13 est la touche "ENTREE"
                        if(e.which == 13){
                                console.log(jQuery('#' + objet.id).val());
                }
        }
}

Pour finir, dans la console je me retrouve avec autant de fois mon texte que j'ai de caractères dans mon input, est ce normal?

Merci d'avance pour vos réponses.

KinderCountry

[Bovino]

Oulala... que de maladresses et de manques de logique dans ton code...

Tout d'abord, tu crées dans le code HTML un gestionnaire d'événement (onkeypress) qui, comme son nom et son contenu l'indiquent, va appeler une fonction (active()) à chaque appui sur une touche. De plus, tu passes en paramètre (this) une référence à l'objet DOM correspondant à cet élément.
Jusque là, pas de problème majeur...

Mais dans ta fonction, tout s'embrouille.

Code :

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

jQuery('#' + objet.id)

Hum... comment dire... à partir de l'élément dont tu as récupéré une référence (objet), tu récupères son id afin de pouvoir retrouver l'élément dont l'id est celui que tu viens de récupérer !
Tu ne crois pas qu'utiliser tout simplement le paramètre serait plus adéquat ?
Bref, ensuite, tu affectes un gestionnaire d'événement à cet élément qui va déclencher une fonction à chaque appui d'une touche de cet élément.
Sauf que... à chaque appui de touche, tu relances cette fonction !
Donc en résumé, à chaque appui de touvhe sur ton champ, tu vas ajouter un gestionnaire d'événement gérant l'appui d'une touche !!!
Donc effectivement, plus tu entreras de caractères dans ton champ, plus il y aura d'appel à ta fonction active() et plus tu auras de gestionnaires affectés à un seul appui.
Du coup, quand tu entres dans ta condition, inutile de te dire ce qu'il se passe, tu l'as déjà constaté...

[KinderCountry]

pour ce bout de code, c'est qu'à la base c'est des inputs créé dynamiquement, d'où le objet.id.

Code :

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

jQuery('#' + objet.id)

Donc, ce n'est pas le "onkeydown" que je dois utiliser, c'est ça? Mais je veux activer ma fonction que lorsque que j'appuie sur "ENTREE" comment l'intercepté que dans mes inputs?

[Bovino]

OK, donc tu n'as pas compris ce que je t'ai dit...

Dans ta fonction, tu as un paramètre qui s'appelle objet et qui référence l'input qui a déclenché l'événement.
Ensuite, à partir de cet input, tu demandes son id pour récupérer une référence à l'input ayant cet id, à savoir, l'input référencé par le paramètre objet !

En gros, tu as ta femme en face de toi et tu lui demandes d'appeler son enfant car tu souhaites lui demander d'appeler sa mère !

Quant à activer le code si la touche ENTER est appuyée, ben fais-le directement dans la fonction active() au lieu de passer par un nouveau gestionnaire qui va créer autant de fonctions pour vérifier que c'est bien la touche ENTER qui a été appuyée qu'il y aura de touches non ENTER appuyées auparavant !

C'est un peu comme si tu étais au zoo avec plusieurs personnes et qu'à chaque animal vu, tu demandes à une personne différente de venir te prévenir si c'est un Lion. Donc si tu vois 50 animaux avant le Lion, 50 personnes vont venir te prévenir...

[KinderCountry]

Merci pour ton explication imagée, je comprends un peu mieux.

Donc en gros, il me faut juste l’événement et le tour devrai être joué, c'est ça?

Je suis encore novice en JS.

[Bovino]

Je suis encore novice en JS.

Dans ce cas, apprends JavaScript, pas jQuery (ça viendra ensuite).

Sinon, oui, c'est ça : tu as déjà un gestionnaire d'événement pour keydown, auquel tu passes une référence à l'objet ayant reçu l'événement, tu peux aussi récupérer l'objet event lié à cet événement, bref, tu as tout ce qu'il faut pour gérer ton besoin dans la fonction active().