<select>
    <option></option>
    <option></option>
    <option></option>
</select>

J'ai un élément Select, donc généralement lorsque le contrôle "se concentre" dans l'élément Select, puis nous appuyons sur le bouton Entrée pour que l'OPTION soit affichée. Donc, mon problème est que je ne veux pas l'ouvrir sur Enter Press, je veux seulement ouvrir l'élément Select via un clic de souris.

1
CodingFriend 11 avril 2018 à 15:23

4 réponses

Meilleure réponse

Utilisez Event.preventDefault() pour empêcher une action par défaut prise par le navigateur, cela devrait empêcher l'élément select de s'ouvrir lorsque espace ou entrer enfoncé.

vanilla js

document.querySelector("select").addEventListener("keypress", function(event) {
    event.preventDefault();
});

jQuery

$('select').keypress(function (e) {
    e.preventDefault();
})
1
Ben 11 avril 2018 à 15:10

Notez que l'accessibilité au clavier est l'un des principaux locataires de l'accessibilité sur le Web. En désactivant la possibilité pour les utilisateurs d'ouvrir des sélections, vous rendez votre interface utilisateur inutilisable par les personnes handicapées qui ne peuvent pas utiliser une souris / un pavé tactile standard.

Les navigateurs font la bonne chose par défaut, veuillez ne pas travailler contre eux!

0
Pierre 3 août 2019 à 12:16

Vous pouvez écouter l'événement keydown et empêcher l'action par défaut si vous appuyez sur la touche Entrée . Vous pouvez vérifier s'il s'agit de la clé d'entrée en vérifiant les key, keyCode ou which en fonction de la compatibilité du navigateur.

Par exemple.

document
  .getElementById("select")
  .addEventListener("keydown", function(e) {
    if (e.key === "Enter" || (e.keyCode || e.which) === 13)
      e.preventDefault();
  });
<select id="select">
    <option>aaa</option>
    <option>bbb</option>
    <option>ccc</option>
</select>
1
H77 11 avril 2018 à 15:14

Si je comprends votre question ce que vous pensez ..., cela peut être la réponse:

<html>
<head>
   <title>Single Listbox Select Element</title>
</head>
<body>
<select size="2" style="height:1.5em;width:3em">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
   <option>5</option>
   <option>6</option>
</select>
</body>
</html>
1
simhumileco 11 avril 2018 à 15:17