Capturando combinación de teclas ctrl + z en javascript

85

Estoy tratando de capturar ctrl+ zcombinación de teclas en javascript con este código:

<html>
<head>
    <title>Untitled Document</title>
</head>
<body>

    <script type='text/javascript'>
        function KeyPress(e) {
            var evtobj = window.event? event : e


            //test1 if (evtobj.ctrlKey) alert("Ctrl");
            //test2 if (evtobj.keyCode == 122) alert("z");
            //test 1 & 2
            if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
        }

        document.onkeypress = KeyPress;
    </script>

</body>
</html>

La línea comentada "test1" genera la alerta si mantengo presionada la ctrltecla y presiono cualquier otra tecla.

La línea comentada "test2" genera la alerta si presiono la ztecla.

Póngalos juntos según la línea después de "prueba 1 y 2", y mantener presionada la ctrltecla y luego presionar la ztecla no genera la alerta como se esperaba.

¿Qué pasa con el código?

javascript combinations ctrl Paul Johnston
fuente

Respuestas:

95
  1. Utilice onkeydown(o onkeyup), noonkeypress
  2. Utilice keyCode90, no 122

Demostración en línea: http://jsfiddle.net/29sVC/

Para aclarar, los códigos de teclas no son lo mismo que los códigos de caracteres.

Los códigos de caracteres son para texto (difieren según la codificación, pero en muchos casos 0-127 siguen siendo códigos ASCII). Los códigos de teclas se asignan a las teclas de un teclado. Por ejemplo, en el carácter Unicode 0x22909 significa 好. No hay muchos teclados (si los hay) que realmente tengan una tecla para esto.

El sistema operativo se encarga de transformar las pulsaciones de teclas en códigos de caracteres utilizando los métodos de entrada que configuró el usuario. Los resultados se envían al evento de pulsación de tecla. (Mientras que el teclado y el teclado responden cuando el usuario presiona los botones, no cuando escribe texto)

zerkms
fuente
1
Gracias, eso funciona. ¿Por qué no funcionan onkeypress y keyCode 122?
Paul Johnston
¿Cómo preventDefault () en lugar de alertar en su solución, por favor? Estoy probando Ctrl + t.
Surendra Jnawali
@SJnawali: no estoy seguro de que sea posible paractrl+t
zerkms
4
¿Por qué keyCode 122 no funciona? bueno, 122es para la tecla F11 :)
Bebé
7
@PaulJohnston Porque un código de tecla no es lo mismo que un código de carácter . Los códigos de caracteres son para texto (difieren según la codificación, pero en muchos casos 0-127 siguen siendo códigos ASCII). Los códigos de teclas se asignan a las teclas de un teclado. Por ejemplo, en el carácter Unicode 0x22909 significa 好. No hay muchos teclados (si los hay) que realmente tengan una tecla para esto. El sistema operativo se encarga de transformar las pulsaciones de teclas en códigos de caracteres utilizando los métodos de entrada que configuró el usuario. Los resultados se envían al keypressevento. (Considerando que keydowny keyupresponder al usuario presionando botones, no escribiendo texto.)
Aidiakapi
28

Para las personas futuras que se encuentren con esta pregunta, aquí hay un método mejor para hacer el trabajo:

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'z') {
    alert('Undo!');
  }
});

Usar event.keysimplifica enormemente el código, eliminando constantes codificadas. Tiene soporte para IE 9+.

Además, usar document.addEventListenersignifica que no golpeará a otros oyentes en el mismo evento.

Finalmente, no hay razón para usar window.event. Se desaconseja activamente y puede resultar en un código frágil.

lazd
fuente
Además, agregaría que KeyboardEvent.keyCodeahora está en desuso desde hace un par de años. La mejor forma de capturar todos los navegadores es comprobar e.keyprimero y luego volver a e.keyCode. O puede usar este polyfill
Sí Barry
9

Ctrl+ ttambién es posible ... simplemente use el código clave como 84 como

if (evtobj.ctrlKey && evtobj.keyCode == 84) 
 alert("Ctrl+t");
chandramouli.jamadagni
fuente
6 
$(document).keydown(function(e){
  if( e.which === 89 && e.ctrlKey ){
     alert('control + y'); 
  }
  else if( e.which === 90 && e.ctrlKey ){
     alert('control + z'); 
  }          
});

Manifestación

Mehtab
fuente
3

90 es la Zclave y esta hará la captura necesaria ...

function KeyPress(e){
     // Ensure event is not null
     e = e || window.event;

     if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
         // Ctrl + Z
         // Do Something
     }
}

Dependiendo de sus requisitos, es posible que desee agregar una e.preventDefault();dentro de su declaración if para realizar exclusivamente su funcionalidad personalizada.

JDandChips
fuente
-3

Este complemento creado por mí puede ser útil.

Enchufar

Puede usar este complemento, debe proporcionar los códigos clave y la función para que se ejecute así

simulatorControl([17,90], function(){console.log('You have pressed Ctrl+Z');});

En el código, he mostrado cómo actuar para Ctrl+ Z. Obtendrá documentación detallada en el enlace. El complemento está en la sección de código JavaScript de mi lápiz en Codepen.

10011101111
fuente
-5

Utilice este código para CTRL+ Z. El código clave para presionar una Ztecla es 122 y el CTRL+ Zes 26. Verifique este código clave en el área de su consola

 $(document).on("keypress", function(e) {
       console.log(e.keyCode);
       /*ctrl+z*/
       if(e.keyCode==26)
       {
          //your code here
       }
    });
karthikeyan ganesan
fuente