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?

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.)


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.


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");

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


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.


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.


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


-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
       }
    });
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.