Appuyez sur la touche de capture sans placer un élément d'entrée sur la page?

Question

Comment capturer une touche, par exemple, Ctrl + Z, sans placer un élément d'entrée 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 d'entrée (zones d'entrée, zones de texte, etc.)

Answer 1

jQuery a également une excellente mise en œuvre qui est incroyablement facile à utiliser. Voici comment vous pouvez implémenter cette fonctionnalité à travers 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és dans IE7, Firefox 3.6.3 & Chrome 4.1.249.1064

Une autre façon de faire est d'utiliser l'événement KeyDown et de suivre l'événement. code clé. Cependant, étant donné que jQuery et normalise codeTouche charCode en utilisant event.which, leur spec recommande d'utiliser event.which dans une variété de situations:

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

Answer 2

document.onkeydown = keyDown;

document.onkeypress = keyPress;

etc.

Works pour moi dans IE

Answer 3

code & détecte ctrl + z

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

Answer 4

Pour les clés non imprimables telles que les touches fléchées et les touches de raccourci telles que Ctrl-z , Ctrl-x, Ctrl-c qui peut déclencher une action dans le navigateur (par exemple, à l'intérieur de documents ou d'éléments modifiables), vous risquez de ne pas avoir d'événement keypress dans tous les navigateurs. Pour cette raison, vous devez utiliser keydown à la place, si vous souhaitez supprimer l'action par défaut du navigateur. Sinon, keyup fera aussi bien.

Fixation d'un événement keydown à document œuvres 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 vous recommande fortement Jan Wolter's article on JavaScript key handling.

Answer 5

Detect appuyer sur la touche, y compris des combinaisons de touches:

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

avantage ici est que vous êtes pas toutes les propriétés d'écraser globales, mais simplement l'introduction d'un effet secondaire. Pas bon, mais certainement beaucoup moins néfaste que d'autres suggestions ici.

Answer 6

Pour les JS modernes, utilisez event.key!

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

Mozilla Docs

Supported Browsers