Não existe uma lista definitiva, depende do navegador. O único padrão que temos é o HTML de nível 2 do DOM , segundo o qual os únicos elementos que possuem um focus()
método são HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement e HTMLAnchorElement. Isso omite notavelmente HTMLButtonElement e HTMLAreaElement.
Os navegadores de hoje definem focus()
HTMLElement, mas um elemento não terá foco, a menos que seja um dos seguintes:
- HTMLAnchorElement / HTMLAreaElement com um href
- HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement, mas não com
disabled
(o IE realmente mostra um erro se você tentar), e os uploads de arquivos têm um comportamento incomum por motivos de segurança
- HTMLIFrameElement (embora o foco não faça nada de útil). Outros elementos de incorporação também, talvez, eu não os testei todos.
- Qualquer elemento com um
tabindex
É provável que haja outras exceções e adições sutis nesse comportamento, dependendo do navegador.
element.isContentEditable === true
são focáveis também. Observe que o IE -10 (11+?) Pode focar qualquer elemento com o bloco de exibição ou tabela (div, span, etc.).Aqui eu tenho um CSS-selector baseado em bobince 's resposta para selecionar qualquer elemento HTML focalizável:
ou um pouco mais bonito no SASS:
Eu o adicionei como resposta, porque era isso que eu estava procurando quando o Google me redirecionou para esta pergunta do Stackoverflow.
EDIT: Há mais um seletor, que é focável:
No entanto, isso é usado muito raramente.
fonte
<a href="foo.html">Bar</a>
certamente é focável porque é uma
elemento que possui umhref
atributo. Mas o seu seletor não o inclui.tabindex="-1"
se não fazer um elemento unfocusable, ele simplesmente não pode ser focada por tabulação. Ele ainda pode receber foco clicando nele ou programaticamente comHTMLElement.focus()
; o mesmo para qualquer outro número negativo. Veja: developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/…Estou criando uma lista SCSS de todos os elementos que podem ser focalizados e achei que isso poderia ajudar alguém devido ao ranking do Google nesta pergunta.
Algumas coisas a serem observadas:
:not([tabindex="-1"])
para:not([tabindex^="-"])
porque é perfeitamente plausível gerar-2
alguma forma. Melhor prevenir do que remediar, certo?:not([tabindex^="-"])
a todos os outros seletores de foco é completamente inútil. Ao usá-[tabindex]:not([tabindex^="-"])
lo, já inclui todos os elementos que você negaria:not
!:not([disabled])
porque os elementos desativados nunca podem ser focados. Então, novamente, é inútil adicioná-lo a todos os elementos.fonte
O ally.js biblioteca de acessibilidade do fornece uma lista não oficial baseada em teste aqui:
https://allyjs.io/data-tables/focusable.html
(Nota: a página deles não diz com que frequência os testes foram realizados.)
fonte
Talvez este possa ajudar:
valor de retorno: verdadeiro = sucesso, falso = falhou
Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
fonte
http://www.w3schools.com/cssref/sel_focus.asp
fonte