Empêcher la navigation flèche droite / gauche dans sélectionner

J’ai 3 sélections que je permets la navigation au clavier (touches fléchées droite et gauche) pour me déplacer entre eux. Le comportement par défaut lorsque vous appuyez sur la touche fléchée droite ou gauche est de faire défiler la liste vers le haut ou le bas.

Ma solution fonctionne en se déplaçant entre les sélections, mais chaque fois que vous passez à une nouvelle sélection, la valeur sélectionnée dans la sélection que vous venez de déplacer est déplacée vers le haut ou le bas en fonction de la flèche sur laquelle vous avez appuyé.

Existe-t-il un moyen d’empêcher les touches fléchées droite et gauche par défaut pour les sélections? J’ai essayé e.preventPropagation et e.preventDefault mais cela ne semble pas fonctionner.

JSFIDDLE

Je viens de le comprendre. J’étais lié à l’événement de frappe au clavier lorsque je devais établir une liaison avec l’événement de clavier. Lors de la liaison à keydown, vous pouvez utiliser e.preventDefault ().

JSFIDDLE SOLUTION

La solution d’OP ne fonctionnant pas dans Firefox, j’ai créé une solution de contournement pour le bogue connu dans Firefox . En event.preventDefault n’empêche pas les nœuds ← et → sur de Firefox.

Alors voici la solution de contournement en action .

Pour plus d’informations à ce sujet, voir ma réponse détaillée à une question similaire

Pas moyen de le faire fonctionner dans Firefox pour prévenir les événements par défaut …. Et la solution de Ruud est trop compliquée. J’ai donc implémenté cette solution simple et propre, basée sur la même idée:

 $('select').on('keydown', function( e ){ switch(e.keyCode) { // User pressed "left" or "right" arrow case 37: case 39: var val = $(this).val(); var $slt = $(this).one('change', function(){ $slt.val( val ).change(); }); break; } });

Le seul inconvénient est que l’événement “change” est déclenché deux fois, de sorte que votre application peut en prendre soin.