3

Para adicionar um novo item no meu banco de dados existe o botão Adicionar, no entanto gostaria de adicionar um atalho para que exerça a mesma função do botão. Por exemplo quando é clicado o E em qualquer pergunta no SO, essa mesma entra em modo de edição.

No meu caso pensei algo como Shift + N para inserir um novo item.

Usando o keydown é possível detectar que foi pressionado apenas uma tecla, como mostra o exemplo abaixo:

$(document).keydown(function (e) {
    if (e.keyCode == 16) {   
      alert("O código "+ e.which + " que representa o Shift foi precionado");
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Para criar o atalho eu pensei algo do tipo:

if (e.keyCode == 16 && e.keyCode == 78) 

Que neste caso o 78 corresponde o n, porém não funcionou desta forma.

Como eu poderia criar uma atalho na minha pagina web que reconheceria o comando shift+n?

2 Respostas 2

4

O objeto evento traz as propriedades somente leitura shiftKey, ctrlKey, altKey, metaKey (tecla commando do Mac ou tecla Windows), que podem ser true ou false.

Você pode construir algo assim:

$(document).keydown(function (e) {
    if (e.keyCode == 78 && e.shiftKey) {   
      alert("shift+n");
    }
});

A função repassada ao keydown é invocada cada vez que uma tecla é pressionada: se eu pressionar o SHIFT, ele vai disparar o evento, e, mesmo com ele pressionado, se eu teclar o N, ele vai disparar novamente o evento (segunda vez). Mas aí existe aquela propriedade que informa que o SHIFT está pressionado.

Então se você checar com o if (e.keyCode == 16 && e.keyCode == 78), não irá resultar em true por que o evento é disparado duas vezes:

  1. quando o SHIFT é pressionado, evento disparado pela primeira vez com o keyCode 16 e shiftKey: true (por que é o shift que foi pressionado);
  2. quando o N é pressionado, evento disparado pela segunda vez com o keyCode 78 e shiftKey: true.

Por fim, a documentação diz que, se eu ficar pressionando uma tecla, ele irá invocar a função toda vez que o sistema operacional repeti-la. Por exemplo, se você pressionar e ficar segurando a tecla A, ele irá invocar o .keyDown uma vez, esperar um pouco, e logo em seguida irá invocá-la várias vezes na sequência, como se o usuário tivesse repetidamente apertando a tecla, pois o sistema operacional a repete (como em qualquer editor se ficarmos segurando uma tecla por um tempo: ela será repetida várias vezes).

Mas o mesmo comportamento não acontece com algumas teclas especiais, dentre elas o SHIFT. O sistema operacional não a repete quando você a mantém pressionada.

Criei um fiddle que monitora o keydown e adiciona uma linha na tabela a cada tecla pressionada, para testes: https://jsfiddle.net/mrlew/texabz01/

3
  • Funcionou assim cara, você sabe me dizer por qual motivo não funcionou assim: if (e.keyCode == 16 && e.keyCode == 78) considerando que o keyCode 16 refere-se ao shift ?
    – viana
    Commented 23/01/2017 às 13:05
  • @AckLay editei minha resposta com uma complementação e criei um fiddle para testar esses cenários. Abraços
    – luiscrjr
    Commented 23/01/2017 às 15:10
  • 1
    Ótimo exemplo +1 Commented 23/01/2017 às 15:42
3

O objeto event traz informações como:

  • event.ctrlKey
  • event.altKey
  • event.metaKey
  • event.shiftKey

Tente:

$(document).bind('keypress', function(event) {

        if( event.which === 78 && event.shiftKey ) {
            alert('pressione SHIFT+N');
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2
  • Funcionou também assim cara, você sabe me dizer por qual motivo não funcionou assim: if (e.keyCode == 16 && e.keyCode == 78) considerando que o keyCode 16 refere-se ao shift ?
    – viana
    Commented 23/01/2017 às 13:05
  • Acredito que basicamente keydown armazene apenas uma keyCode por vez, e só pode ser chamada novamente se a tecla pressionado anteriormente não estiver mais pressionada Commented 23/01/2017 às 13:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .