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