web-dev-qa-db-fra.com

Événement Javascript déclenché en appuyant sur l'espace

J'essaie de déclencher un événement lorsque je suis sur une page et que je presse l'espace, mais je ne peux pas le comprendre. Actuellement, j'essaie d'utiliser jQuery pour obtenir un résultat satisfaisant.

J'ai essayé d'utiliser keydown, keyup et keypress. Mais il semble que vous ne pouvez l'utiliser que si vous saisissez réellement quelque chose dans un formulaire ou un champ.

Ce que je veux, c'est déclencher une alerte lorsque l'espace est pressé.

Merci d'avance!

javascriptjqueryjavascript-events
25
Henrik Skogmo

Ces événements montent en flèche, donc si vous essayez de déclencher l'événement où que vous soyez (c'est-à-dire pas dans une entrée), liez simplement un gestionnaire sur window:

$(window).keypress(function (e) {
  if (e.key === ' ' || e.key === 'Spacebar') {
    // ' ' is standard, 'Spacebar' was used by IE9 and Firefox < 37
    e.preventDefault()
    console.log('Space pressed')
  }
})

Voir aussi la liste de tous les .key valeurs .

41
Félix Saparelli

Essaye ça:

$('input:text').keypress(function(e) {
    if (e.keyCode == 0 || e.keyCode == 32) // `0` works in mozilla and `32` in other browsers
       console.log('space pressed');
});
6
thecodeparadox

Ce code peut être utilisé:

$(window).keypress(function(e) {
  if (e.keyCode == 0 || e.keyCode == 32) {
    console.log('Space pressed');
  }
});


Explication:
La $(window).keypress(function(e) attend que l'utilisateur appuie sur n'importe quelle touche et stocke les données de la touche pressée dans l'argument 'e'.
Ensuite, if (e.keyCode == 0 || e.keyCode == 32) vérifie si le code de la touche enfoncée est égal au code de la barre d'espace, c'est-à-dire 0 ou 32. Si cela renvoie faux, alors n'importe quelle autre touche est enfoncée et le code se termine.

Quelques codes clés couramment utilisés:

  • retour arrière: 8
  • onglet: 9
  • entrez: 13
  • décalage: 16
  • ctrl: 17
  • alt: 18
  • verrouillage des majuscules: 20
  • évasion: 27
  • (espace): 32
  • 0-9: 48-57
  • a-z: 65-90
  • numpad0-numpad9: 96-105
4
DJ18

Essayez de lier votre écouteur d'événement clé à l'objet jQuery $ (document);

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $(document).keydown(function(e) {
          if (e.keyCode == '32') {
            alert('space');
          }
        });
      });
    </script>
  </head>
  <body>
  </body>
</html>
4
Karl-Bjørnar Øie