+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
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.
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
Respostas:
(1) Defina o
tabindex
atributo:(2) Vincule ao keydown:
Para definir o foco no início:
Para remover - se você não gostar - a
div
borda do foco, definaoutline: none
no CSS.Veja a tabela de códigos de teclas para mais
keyCode
possibilidades.Todo o código supondo que você use jQuery.
#fonte
Aqui exemplo em JS simples:
fonte
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
Tab
tecla). Leia MDN Web Docs para referência completa.Usando Jquery
Mostrar snippet de código
Usando JavaScript
Mostrar snippet de código
fonte