Capturar presionar la tecla sin colocar un elemento de entrada en la página?

Question

Cómo capturar la pulsación de tecla, por ejemplo, Ctrl + Z, sin colocar un elemento de entrada en la página en JavaScript? Parece que en IE, los eventos de keypress y keyup solo pueden vincularse a los elementos de entrada (cuadros de entrada, áreas de texto, etc.)

Answer 1

jQuery también tiene una excelente aplicación que es increíblemente fácil de usar. He aquí cómo se podría implementar esta funcionalidad en todos los navegadores:

$(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>"); 
}); 

Probado en IE7, Firefox 3.6.3 & Chrome 4.1.249.1064

Otra forma de hacer esto es usar el evento KeyDown y realizar un seguimiento del evento. clave. Sin embargo, puesto jQuery normaliza keyCode y charCode usando event.which, su spec recomienda el uso de event.which en una variedad de situaciones:

$(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.

funciona para mí en IE

Answer 3

Código & detecta ctrl + z

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

Answer 4

Para las claves no imprimibles, tales como teclas de flecha y teclas de acceso directo, tales como Ctrl-z , Ctrl-x, Ctrl-c que pueden desencadenar alguna acción en el navegador (por ejemplo, dentro de documentos o elementos editables), es posible que no obtenga un evento de pulsación de tecla en todos los navegadores. Por este motivo, debe utilizar keydown en su lugar, si le interesa suprimir la acción predeterminada del navegador. De lo contrario, keyup funcionará igual de bien.

Colocación de un evento keydown a document obras en todos los principales navegadores:

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

Para una referencia completa, recomiendo fuertemente Jan Wolter's article on JavaScript key handling.

Answer 5

Detectar pulsación de tecla, incluyendo combinaciones de teclas:

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

ventaja aquí es que son no sobrescribir propiedades globales, sino que simplemente introduciendo un efecto secundario. No es bueno, pero definitivamente es mucho menos nefasto que otras sugerencias aquí.

Answer 6

Para JS moderno, use event.key!

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

Mozilla Docs

Supported Browsers