Comment détecter les pressions sur les touches en Javascript ?

Question

Après avoir cherché sur Internet, j'ai vu beaucoup de suggestions (utiliser window.onkeypress, utiliser jQuery, etc.) mais pour presque chaque option, il y a un contre-argument. Comment puis-je détecter une pression sur une touche en Javascript ?

Answer 1

Avec le Javascript simple, le plus simple est :

document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

Mais avec cette méthode, vous ne pouvez lier qu'un seul gestionnaire pour l'événement.

En outre, vous pouvez utiliser la méthode suivante pour lier plusieurs gestionnaires au même événement :

addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

Dans les deux cas, keyCode n'est pas cohérent d'un navigateur à l'autre, il y a donc plus à vérifier et à comprendre. Notez le e = e || window.event - c'est un problème normal avec Internet Explorer, en mettant l'événement en window.event au lieu de le passer au callback.

Références :

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

Avec jQuery :

$(document).on("keypress", function (e) {
    // use e.which
});

Référence :

• http://api.jquery.com/on/

Outre le fait que jQuery est une "grande" bibliothèque, jQuery aide vraiment à résoudre les incohérences entre les navigateurs, en particulier avec les événements de fenêtre... et on ne peut pas le nier. J'espère qu'il est évident que le code jQuery que j'ai fourni pour votre exemple est beaucoup plus élégant et plus court, tout en accomplissant ce que vous voulez de manière cohérente. Vous devriez pouvoir faire confiance à e (l'événement) et e.which (le code de la touche, pour savoir quelle touche a été pressée) sont exactes. En Javascript, c'est un peu plus difficile à savoir, à moins de faire tout ce que la bibliothèque jQuery fait en interne.

Notez qu'il existe un keydown qui est différent de keypress . Vous pouvez en savoir plus à leur sujet ici : onKeyPress vs. onKeyUp et onKeyDown

Pour ce qui est des suggestions d'utilisation, je suggérerais certainement d'utiliser jQuery si vous êtes prêt à apprendre le framework. En même temps, je dirais que vous devriez apprendre la syntaxe, les méthodes et les fonctionnalités de Javascript, ainsi que la façon d'interagir avec le DOM. Une fois que vous aurez compris comment cela fonctionne et ce qui se passe, vous serez plus à l'aise pour travailler avec jQuery. Pour moi, jQuery rend les choses plus cohérentes et est plus concis. En fin de compte, c'est Javascript, et il enveloppe le langage.

AJAX est un autre exemple de l'utilité de jQuery. Les navigateurs ne sont pas uniformes quant à la manière de traiter les requêtes AJAX. JQuery fait abstraction de ce problème pour que vous n'ayez pas à vous en soucier.

Voici quelque chose qui pourrait vous aider à décider :

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

Answer 2

KEYPRESS (touche entrée)
Cliquez à l'intérieur du snippet et appuyez sur la touche Entrée.

Vanille

document.addEventListener("keypress", function(event) {
  if (event.keyCode == 13) {
    alert('hi.');
  }
});

Sténographie de la vanille (ES6)

this.addEventListener('keypress', event => {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

jQuery

$(this).on('keypress', function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery classique

$(this).keypress(function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Abréviation de jQuery (ES6)

$(this).keypress((e) => {
  if (e.keyCode == 13)
    alert('hi.')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Encore plus court (ES6)

$(this).keypress(e=>
  e.which==13?
  alert`hi.`:null
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

En raison de certaines demandes, voici une explication :

J'ai réécrit cette réponse car certaines choses sont devenues dépréciées au fil du temps, je l'ai donc mise à jour et à cause d'un type dans les commentaires qui disait qu'il y avait trop de "bla-bla". Et il ne s'agit pas de "touche enfoncée", mais de "touche pressée". Donc certaines touches sans caractère comme "Esc" ne sont pas censées fonctionner comme ça.

J'ai utilisé this pour se concentrer sur l'étendue de la fenêtre à l'intérieur des résultats lorsque le document est prêt et pour des raisons de brièveté, mais ce n'est pas nécessaire.

Déprécié :
Le site .which et .keyCode sont en fait considérées comme dépréciées et je recommande donc .code mais je continue personnellement à utiliser keyCode car les performances sont beaucoup plus rapides et c'est tout ce qui compte pour moi. La version classique de jQuery .keypress() n'est pas officiellement déprécié comme certains le disent mais ils ne sont plus préférés comme .on('keypress') car il a beaucoup plus de fonctionnalités (état en direct, gestionnaires multiples, etc.). Le site 'keypress' dans la version Vanilla est également déprécié. Les gens devraient préférer avant l'entrée o touchedown , keyup aujourd'hui.

Performance :
Plus c'est rapide, mieux c'est. C'est pourquoi je préfère .keyCode même si elle est considérée comme dépréciée (dans la plupart des cas). Mais c'est à vous de voir (Commited 2020).

Test de performance

Answer 3

Utilisez event.key et JS moderne !

Aucun code numérique plus. Vous pouvez utiliser "Enter" , "ArrowLeft" , "r" ou tout autre nom de clé directement, ce qui rend votre code beaucoup plus lisible.

REMARQUE : Les anciennes alternatives ( .keyCode et .which ) sont dépréciés.

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "ArrowLeft") {
        // Move Left
    }
    else if (event.key === "Enter") {
        // Open Menu...
    }
});

Docs Mozilla

Navigateurs pris en charge

Answer 4

Ne compliquez pas trop les choses.

  document.addEventListener('keydown', logKey);
    function logKey(e) {
      if (`${e.code}` == "ArrowRight") {
        //code here
      }
          if (`${e.code}` == "ArrowLeft") {
        //code here
      }
          if (`${e.code}` == "ArrowDown") {
        //code here
      }
          if (`${e.code}` == "ArrowUp") {
        //code here
      }
    }

Answer 5

Il existe plusieurs façons de gérer cela ; Vanilla JavaScript le fait très bien :

function code(e) {
    e = e || window.event;
    return(e.keyCode || e.which);
}
window.onload = function(){
    document.onkeypress = function(e){
        var key = code(e);
        // do something with key
    };
};

Ou une manière plus structurée de le faire :

(function(d){
    var modern = (d.addEventListener), event = function(obj, evt, fn){
        if(modern) {
            obj.addEventListener(evt, fn, false);
        } else {
            obj.attachEvent("on" + evt, fn);
        }
    }, code = function(e){
        e = e || window.event;
        return(e.keyCode || e.which);
    }, init = function(){
        event(d, "keypress", function(e){
            var key = code(e);
            // do stuff with key here
        });
    };
    if(modern) {
        d.addEventListener("DOMContentLoaded", init, false);
    } else {
        d.attachEvent("onreadystatechange", function(){
            if(d.readyState === "complete") {
                init();
            }
        });
    }
})(document);