Capturando a combinação de teclas ctrl + z em javascript

86

Estou tentando capturar ctrl+ zcombinação de teclas em javascript com 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>

A linha comentada "test1" gera o alerta se eu segurar a ctrltecla e pressionar qualquer outra tecla.

A linha comentada "test2" gera o alerta se eu pressionar a ztecla.

Coloque-os juntos de acordo com a linha após "teste 1 e 2" e mantenha a ctrltecla pressionada e, em seguida, pressione a ztecla para gerar o alerta como esperado.

O que há de errado com o código?

javascript combinations ctrl Paul Johnston
fonte

Respostas:

95
  1. Use onkeydown(ou onkeyup), nãoonkeypress
  2. Use keyCode90, não 122

Demonstração online: http://jsfiddle.net/29sVC/

Para esclarecer, os códigos-chave não são iguais aos códigos de caracteres.

Os códigos de caracteres são para texto (eles diferem dependendo da codificação, mas em muitos casos 0-127 permanecem como códigos ASCII). Os códigos das teclas são mapeados para as teclas de um teclado. Por exemplo, no caractere Unicode 0x22909 significa 好. Não há muitos teclados (se houver) que realmente tenham uma tecla para isso.

O sistema operacional se encarrega de transformar os pressionamentos de tecla em códigos de caracteres usando os métodos de entrada configurados pelo usuário. Os resultados são enviados para o evento keypress. (Considerando que keydown e keyup respondem ao usuário pressionando botões, não digitando texto.)

zerkms
fonte
1
Obrigado, isso funciona. Por que onkeypress e keyCode 122 não funcionam?
Paul Johnston
Como prevenirDefault () em vez de alertar em sua solução, por favor? Estou testando para Ctrl + t.
Surendra Jnawali
@SJnawali: Não tenho certeza se é possívelctrl+t
zerkms
4
por que o keyCode 122 não funciona? bem, 122é para a tecla F11 :)
Bebê de
7
@PaulJohnston Porque um código- chave não é o mesmo que um código de caractere . Os códigos de caracteres são para texto (eles diferem dependendo da codificação, mas em muitos casos 0-127 permanecem códigos ASCII). Os códigos das teclas são mapeados para as teclas de um teclado. Por exemplo, no caractere Unicode 0x22909 significa 好. Não há muitos teclados (se houver) que realmente tenham uma tecla para isso. O sistema operacional se encarrega de transformar as teclas digitadas em códigos de caracteres usando os métodos de entrada configurados pelo usuário. Os resultados são enviados para o keypressevento. (Considerando que keydowne keyupresponder ao usuário pressionando botões, não digitando texto.)
Aidiakapi
32

Para as pessoas que vierem a tropeçar nesta questão, aqui está um método melhor para fazer o trabalho:

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

Usar event.keysimplifica bastante o código, removendo constantes codificadas. Possui suporte para IE 9+.

Além disso, usar document.addEventListenersignifica que você não afetará outros ouvintes no mesmo evento.

Finalmente, não há razão para usar window.event. É ativamente desencorajado e pode resultar em código frágil.

preguiçoso
fonte
Além disso, eu acrescentaria que KeyboardEvent.keyCodeagora está obsoleto há alguns anos. A melhor maneira de capturar todos os navegadores é verificar e.keyprimeiro e depois voltar para e.keyCode. Ou você pode usar este polyfill
Sim Barry
9

Ctrl+ ttambém é possível ... basta usar o código-chave como 84 como

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

Demo

Mehtab
fonte
3

90 é a Zchave e isso fará a captura necessária ...

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
     }
}

Dependendo de seus requisitos, você pode desejar adicionar uma e.preventDefault();declaração if para executar exclusivamente sua funcionalidade personalizada.

JDandChips
fonte
0 
document.onkeydown = function (e) {
    var special = e.ctrlKey || e.shiftKey;
    var key = e.charCode || e.keyCode;
  console.log(key.length);
  if (special && key == 38 || special && key == 40 ) { 
    // enter key do nothing
    e.preventDefault();
  }        
}

aqui está uma maneira de bloquear duas teclas, Shift + ou Ctrl + combinações de teclas.

&& ajuda com as combinações de teclas, sem as combinações, bloqueia todas as teclas ctrl ou shift.

newguy12121
fonte
-3

Este plug-in feito por mim pode ser útil.

Plugar

Você pode usar este plugin; você deve fornecer os códigos-chave e a função para funcionar assim

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

No código, mostrei como executar para Ctrl+ Z. Você obterá documentação detalhada no link. O plugin está na seção Código JavaScript da minha caneta no Codepen.

10011101111
fonte
-5

Use este código para CTRL+ Z. o código para Zem keypress é 122 e o CTRL+ Zé 26. verifique este código na área do console

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