Como criar eventos ao pressionar CTRL, ALT e SHIFT

Neste post rápido será visto como criar eventos para capturar quando o usuário pressiona CTRL, ALT ou SHIFT na tela do navegador. Aproveitando que isso já está sendo visto, também vamos testar algumas combinações de teclas.

A primeira parte que você precisa fazer é o evento. Você precisa dizer onde que deverá estar o foco na hora que foi apertado o botão, no nosso exemplo usaremos o document pois mais amplo que isso não tem como. Você pode usar o body ou até uma “zona” menor caso prefira.

 

JavaScript

document.addEventListener("keydown", function(event){});

 

JQuery

$(document).bind('keydown', function(event){ });

Note que estamos usando o evento “keydown”, isso é importante pois keypress e keyup não captura as teclas que queremos.


 

Agora vejamos sobre como saber o que foi clicado, você já deve ter tentado o key, keycode e which, mas nada aconteceu. Isso acontece pois precisamos acessar outras propriedades para saber se o CTRL, ALT ou SHIFT foram pressionados. Veja abaixo:

event.ctrlKey // CTRL

event.altKey // ALT

event.shiftKey // SHIFT

Simples assim? Sim, simples assim….

Então se quisermos saber quem foi pressionado, podemos fazer o seguinte:

 

JavaScript

document.addEventListener("keydown", function(event){

    if(event.ctrlKey) {
        console.log('ctrl');
    }

    if(event.altKey) {
        console.log('alt');
    }

    if(event.shiftKey) {
        console.log('shift');
    }
});

 

Para JQuery basta alterar a primeira linha por 

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

 

Por último, você pode estar querendo uma combinação, como por exemplo um CTRL + A. Agora que sabemos como pegar o CTRL, ficou fácil

document.addEventListener("keydown", function(event){

    if(event.ctrlKey && event.key == "a") {
        console.log('ctrl + a');
    }

});

 

É isso ai, espero que com esse post eu tenha ajudado outros que tiveram o mesmo problema para descobrir como criar estes eventos que combinam pressionar várias teclas. Até a próxima

Deixe um comentário