Comment utiliser javascript ou jquery pour obtenir une entrée au clavier lorsque le menu déroulant html est affiché?

yongyong313

Je veux obtenir l'entrée en utilisant javascript ou jquery lorsque l'utilisateur appuie sur le clavier. Cela est possible lorsque le menu déroulant n'est pas affiché. Lorsque le menu déroulant est affiché, onkeypress ne sera pas déclenché.

<html>
<body>
<select id="test" onkeypress="sayHello()">
<option value="1">1234</option>
<option value="5">5678</option>
</select>
</body>

<script>
function sayHello(){
    alert("Hello");
}
</script>
</html>
Jan

Je pense que ce n'est pas possible avec le menu déroulant de sélection par défaut, car le menu déroulant ouvert est créé au-dessus de la fenêtre du navigateur et ne fait pas réellement partie du document.

Vous pouvez utiliser / créer une sorte de remplacement qui rend un menu déroulant personnalisé avec des éléments html à l'intérieur du document, puis capturer tous les événements que vous souhaitez.

Par exemple, jetez un œil à Select2 . Mais il existe également de nombreuses autres bibliothèques.

Voici un exemple qui utilise select2 et alerte uniquement si un événement keydown se produit et que la liste déroulante est ouverte:

$(document).ready(function() {
  $('#example').select2({
    minimumResultsForSearch: 99
  });
  
  let isDropdownOpen = false;
  $('#example').on('select2:open', function(event) {
    isDropdownOpen = true;
  });
  $('#example').on('select2:close', function(event) {
    isDropdownOpen = false;
  });
  
  $(document).on('keydown', function(event) {
    if (isDropdownOpen) {
      event.preventDefault();
      alert('Hello!');
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select id="example" name="example">
  <option value="1234">1234</option>
  <option value="5678">5678</option>
</select>

Cet article est collecté sur Internet, veuillez indiquer la source lors de la réimpression.

En cas d'infraction, veuillez [email protected] Supprimer.

modifier le
0

laisse moi dire quelques mots

0commentaires
connexionAprès avoir participé à la revue

Articles connexes

TOP liste

  1. 1

    comment afficher un bouton au-dessus d'un autre élément ?

  2. 2

    impossible d'obtenir l'image d'arrière-plan en plein écran dans reactjs

  3. 3

    Je continue à obtenir l'objet 'WSGIRequest' n'a pas d'attribut 'Get' sur django

  4. 4

    comment supprimer "compte de connexion google" à des fins de développement - actions sur google

  5. 5

    Conversion double en BigDecimal en Java

  6. 6

    Impossible d'accéder à la vue personnalisée pendant le test de l'interface utilisateur dans XCode

  7. 7

    Algorithme: diviser de manière optimale une chaîne en 3 sous-chaînes

  8. 8

    Passer la taille d'un tableau 2D à une fonction ?

  9. 9

    Comment obtenir l'intégration contextuelle d'une phrase dans une phrase à l'aide de BERT ?

  10. 10

    Comment changer le navigateur par défaut en Microsoft Edge pour Jupyter Notebook sous Windows 10 ?

  11. 11

    CSS: before ne fonctionne pas sur certains éléments,: after fonctionne très bien

  12. 12

    Comment créer un bot à compte à rebours dans Discord en utilisant Python

  13. 13

    Comment ajouter une entrée à une table de base de données pour une combinaison de deux tables

  14. 14

    Exporter la table de l'arborescence vers CSV avec mise en forme

  15. 15

    Comment activer le message Pylint "too-many-locals" dans VS Code?

  16. 16

    Créer un système Buzzer à l'aide de python

  17. 17

    Spring @RequestParam DateTime format comme ISO 8601 Date Heure facultative

  18. 18

    Empêcher l'allocation de mémoire dans la génération de combinaison récursive

  19. 19

    Déplacement des moindres carrés d'ajustement pour les déplacements de points ayant des problèmes

  20. 20

    Comment choisir le nombre de fragments et de répliques Elasticsearch

  21. 21

    Microsoft.WebApplication.targets

chaudétiquette

Archive