Capturar evento de pressionamento de tecla (ou tecla pressionada) no elemento DIV

146

Como você intercepta o evento de pressionamento de tecla ou tecla pressionada em um elemento DIV (usando jQuery)?

O que é necessário para dar foco ao elemento DIV?

Lalchand
fonte
2
O que significa "focus" para uma div?
precisa
1
jboyd que não seja tabulação quando houver um índice de tabulação, você pode usar o javascript para encontrá-lo e chamar o método de foco.
Brendan Enrick
2
@Lalchand ... você pode aceitar a minha resposta de alguma forma? :)
helle

Respostas:

301

(1) Defina o tabindexatributo:

<div id="mydiv" tabindex="0" />

(2) Vincule ao keydown:

 $('#mydiv').on('keydown', function(event) {
    //console.log(event.keyCode);
    switch(event.keyCode){
       //....your actions for the keys .....
    }
 });

Para definir o foco no início:

$(function() {
   $('#mydiv').focus();
});

Para remover - se você não gostar - a divborda do foco, defina outline: noneno CSS.

Veja a tabela de códigos de teclas para mais keyCodepossibilidades.

Todo o código supondo que você use jQuery.

#
helle
fonte
43
+1 tabindex é o ponto principal aqui para tornar a div 'selecionável'. JQuery não é necessário, o mesmo funciona com Angular e (suponho) com eventos javascript simples.
Jukka Dahlbom
4
Qual é o suporte do navegador para isso?
knownasilya
27
tabindex é uma parte essencial, mas não o defina com nenhum valor diferente de "0". Fazer algo acima de 0 vai atrapalhar os leitores de tela para usuários com deficiência visual (ele pulará tudo na página e passará diretamente para qualquer índice de tabulação acima de 0). tabindex = "0" torna "tabbable". você pode ter elementos infinitos com tabindex = "0"
zonabi:
2
Funciona com <pre> também!
dfmiller
2
Excelente! Estava faltando o atributo tabindex, talvez porque os DIVs não possam receber o foco, a menos que tenham um tabindex. Valeu cara! Salvou a minha vida! Edição: trabalha com React também
Vinícius Negrão
6

Aqui exemplo em JS simples:

document.querySelector('#myDiv').addEventListener('keyup', function (e) {
  console.log(e.key)
})
#myDiv {
  outline: none;
}
<div 
  id="myDiv"
  tabindex="0"
>
  Press me and start typing
</div>

Илья Зеленько
fonte
Como isso responde à pergunta?
Poul Bak
5

O atributo tabindex HTML indica se seu elemento pode ser focado e se / onde participa da navegação seqüencial do teclado (geralmente com a Tabtecla). Leia MDN Web Docs para referência completa.

Usando Jquery

Usando JavaScript

nkshio
fonte
1
Na verdade, eu achei isso procurando um problema com o evento focusout disparado quando os controles na div perderam o foco, digamos clicar na barra de rolagem divs, basta adicionar o tabstop à div e foi a correção, então muito obrigado
MikeT