11521 sujets

JavaScript, DOM et API Web HTML5

évènements js avec une liste <select>

Bonjour,

dans une page web, j'écoute les modification sur une liste de sélection <select> et dès qu'une <option> est sélectionnée, je modifie l'image qui s'affiche dans une zone, par exemple.

je me sers d'une fonction jQuery de ce genre.


	$("#region-sel").on('change', function()  {
	       // mon code etc....
		}


quand je choisis une valeur dans la liste déroulante l'évènement change est détecté, mais si laisse le curseur dans la zone et que je choisis une valeur avec les flèches du clavier haut et bas, cet évènement change n'est pas détecté... il l'est dès que je sors du champ..

c'est normal?
Tout a fait normal oui, quand tu utilise les flèches tu es en mode "Selection", tu n'as rien changer (on change) du tout. Une fois validation, Là le on change est appliqué.
tu peux associé un keypress pour capter l'évent

$("#region-sel").on('change keypress', function()  {
	       // mon code etc....
		}
JENCAL a écrit :
tu peux associé un keypress pour capter l'évent

$("#region-sel").on('change keypress', function()  {
	       // mon code etc....
		}


je viens d'essayer, rien ne se passe sur l'action des flèches

(edit) par contre ça marche si j'appuie sur une touche de lettre du clavier
Modifié par lionel_css3 (02 Mar 2016 - 17:17)
c'est peut être keydown alors.

mais il faut adapter ton code hein! c'est pas juste en ajoutant cet evenement que cela va marcher, il faut CAPTER la keys en question
left = 37
up = 38
right = 39
down = 40

passer l'evenement à ta function avec function(e)
tester le numéro de clef avec e.keyCode dans ta fonction
ET appliquer du JS pour capter la valeurs de l'option actuel (dans le context) pour afficher tel ou tel chose que tu désire.

exemple

EDIT : euh... en fait non, oublie ce que je t'ai dit.. tu peux changer les valeurs avec les fleches sans le keypress event, MAIS j'ai compris que tu parlais d'appliquer l'évenement change quand la liste était OUVERTE avec une simple selection via les arrows. Je pense que cela n'est pas possible.
Je n'arrive pas à capter d'évenement lorsque la lise est ouverte.
Modifié par JENCAL (02 Mar 2016 - 18:12)
a écrit :
quand je choisis une valeur dans la liste déroulante l'évènement change est détecté, mais si laisse le curseur dans la zone et que je choisis une valeur avec les flèches du clavier haut et bas, cet évènement change n'est pas détecté... il l'est dès que je sors du champ..


Ca dépend du navigateur. Avec IE, l'évènement change est déclenché à chaque presssions sur les flèches, tandis qu'avec Firefox effectivement l'évènement n'est déclenché que lorsque tu confirmes la sélection (soit en quittant le champ, soit en appuyant sur enter).

Étant donné cette différence notoire de comportement, il n'est pas forcément recommandé d'utiliser l'évènement change.


Quant à keypress/keydown, il faut que vous sachiez une fois pour toute: keydown se déclenche systématiquement pour toutes les touches, tandis que keypress ne signale que les caractères tapés qui sont suceptibles de modifier le contenu d'un champ de formulaire (notamment une zone d'édition) (donc pas les flèches, pas origine/fin, pas échap, pas Ctrl/Alt seuls ou dans une combinaison, et pas les caractères modificateurs comme ^ et ´). Si vous voulez annuler ou influencer une saisie dans un champ de formulaire, c'est keypress qu'il faut intercepter; pour tout le reste c'est keydown. Pour la culture, aller regarder WM_CHAR et WM_KEYDOWN en programmation de GUI windows, c'est intéressan et la distinction est beaucoup plus claire (oui, effectivement, le nom keypress est extrêmement mal choisi, je ne sais pas si on doit remercier Microsoft ou Netscape pour ce nom).
QuentinC a écrit :


Quant à keypress/keydown, il faut que vous sachiez une fois pour toute: keydown se déclenche systématiquement pour toutes les touches, tandis que keypress ne signale que les caractères tapés qui sont suceptibles de modifier le contenu d'un champ de formulaire (notamment une zone d'édition) (donc pas les flèches, pas origine/fin, pas échap, pas Ctrl/Alt seuls ou dans une combinaison, et pas les caractères modificateurs comme ^ et ´). Si vous voulez annuler ou influencer une saisie dans un champ de formulaire, c'est keypress qu'il faut intercepter; pour tout le reste c'est keydown. Pour la culture, aller regarder WM_CHAR et WM_KEYDOWN en programmation de GUI windows, c'est intéressan et la distinction est beaucoup plus claire (oui, effectivement, le nom keypress est extrêmement mal choisi, je ne sais pas si on doit remercier Microsoft ou Netscape pour ce nom).


merci énormément Smiley smile
Sujet clos
Aller à