Capter la pression d'une touche sans placer un élément de saisie sur la page ?

Question

Comment capturer l'appui sur une touche, par exemple Ctrl+Z, sans placer un élément de saisie sur la page en JavaScript ? Il semble que dans IE, les événements keypress et keyup ne peuvent être liés qu'à des éléments de saisie (zones de saisie, zones de texte, etc.).

Answer 1

Pour les touches non imprimables telles que les touches fléchées et les touches de raccourci telles que Ctrl-z, Ctrl-x, Ctrl-c qui peuvent déclencher une action dans le navigateur (par exemple, à l'intérieur de documents ou d'éléments modifiables), il se peut que vous n'obteniez pas un événement de pression de touche dans tous les navigateurs. Pour cette raison, vous devez utiliser keydown à la place, si vous souhaitez supprimer l'action par défaut du navigateur. Si ce n'est pas le cas, keyup fera tout aussi bien l'affaire.

Attacher un keydown à l'événement document fonctionne dans tous les principaux navigateurs :

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

Pour une référence complète, je recommande vivement L'article de Jan Wolter sur la gestion des clés JavaScript .

Answer 2

JQuery dispose également d'une excellente mise en œuvre, incroyablement facile à utiliser. Voici comment vous pourriez mettre en œuvre cette fonctionnalité dans tous les navigateurs :

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

Testé dans IE7,Firefox 3.6.3 & Chrome 4.1.249.1064

Une autre façon de procéder consiste à utiliser l'événement keydown et à suivre l'event.keyCode. Toutefois, comme jQuery normalise le keyCode et le charCode en utilisant event.which, ses spécifications recommandent d'utiliser event.which dans diverses situations :

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});

Answer 3

Pour le JS moderne, utilisez event.key !

document.addEventListener("keypress", function onPress(event) {
    if (event.key === "z" && event.ctrlKey) {
        // Do something awesome
    }
});

REMARQUE : Les anciennes propriétés ( .keyCode y .which ) sont dépréciés.

Docs Mozilla

Navigateurs pris en charge

Answer 4

Détecter la pression des touches, y compris les combinaisons de touches :

window.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.keyCode == 90) {
    // Ctrl + z pressed
  }
});

L'avantage ici est que vous êtes pas écrasement des propriétés globales, mais en introduisant simplement un effet secondaire. Ce n'est pas bon, mais c'est certainement beaucoup moins infâme que d'autres suggestions ici.

Answer 5

Code & détecte ctrl+z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}