Quais elementos HTML podem receber foco?

248

Estou procurando uma lista definitiva de elementos HTML que podem ter foco, ou seja, quais elementos serão colocados em foco quando focus()forem chamados?

Estou escrevendo uma extensão jQuery que funciona em elementos que podem ser destacados. Espero que a resposta a esta pergunta me permita ser específico sobre os elementos que viso.

Paul Turner
fonte

Respostas:

337

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.

bobince
fonte
2
Eu encontrei alguns resultados interessantes: jsfiddle.net/B7gn6 sugere-me que o attrib "tabindex" não é suficiente para o trabalho no Chrome, pelo menos ..
Jon z
19
O fato de o atributo tabindex "permitir que os autores controlem se um elemento deve ser focado" é padronizado em HTML5: w3.org/TR/html5/… Basicamente, um valor 0 torna o elemento focável, mas deixa sua ordem para o navegador .
Natevw 31/03
7
Todos os elementos com element.isContentEditable === truesã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.).
MEMS
14
Um elemento com um índice de tabulação -1 pode receber foco programaticamente através do método de foco; simplesmente não pode ser tabulado.
Jessebeach # 6/15
5
… A menos que o índice de tabulação seja -1, o que impossibilita o foco >> não é verdadeiro, se o índice de tabulação for -1, é possível focar com CLICKING, mas é impossível pressionar pressionando "tab". -1 torna um elemento focável, mas não é adicionado na ordem de tabulação. Consulte: jsfiddle.net/0jz0kd1a , primeiro tente clicar no elemento, depois mude tabindex para 0 e tente usar tab.
precisa saber é
37

Aqui eu tenho um CSS-selector baseado em bobince 's resposta para selecionar qualquer elemento HTML focalizável:

  a[href]:not([tabindex='-1']),
  area[href]:not([tabindex='-1']),
  input:not([disabled]):not([tabindex='-1']),
  select:not([disabled]):not([tabindex='-1']),
  textarea:not([disabled]):not([tabindex='-1']),
  button:not([disabled]):not([tabindex='-1']),
  iframe:not([tabindex='-1']),
  [tabindex]:not([tabindex='-1']),
  [contentEditable=true]:not([tabindex='-1'])
  {
      /* your CSS for focusable elements goes here */
  }

ou um pouco mais bonito no SASS:

a[href],
area[href],
input:not([disabled]),
select:not([disabled]),
textarea:not([disabled]),
button:not([disabled]),
iframe,
[tabindex],
[contentEditable=true]
{
    &:not([tabindex='-1'])
    {
        /* your SCSS for focusable elements goes here */
    }
}

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:

[contentEditable=true]

No entanto, isso é usado muito raramente.

ReeCube
fonte
@TWiStErRob - seu seletor não tem como alvo os mesmos elementos que os seletores do @ ReeCube, porque o seu não inclui elementos que não possuem um índice de tabulação definido explicitamente. Por exemplo, <a href="foo.html">Bar</a>certamente é focável porque é um aelemento que possui um hrefatributo. Mas o seu seletor não o inclui.
jbyrd
@jbyrd que foi apenas um pedido de edição com base na declaração de bobince: "... a menos que o tabindex seja -1, o que torna o foco impossível.", nunca deveria substituir a resposta do ReeCube; veja o histórico de edições.
TWiStErRob
O SASS (ou CSS) é uma forma adequada para fornecer uma resposta rigorosa à pergunta acima (exceto as inconsistências do navegador).
Roy Tinker
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 com HTMLElement.focus(); o mesmo para qualquer outro número negativo. Veja: developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/…
Lazzaro
Eu não excluiria itens com tabindex-1. Os usuários não poderão se concentrar através de nenhum dispositivo de entrada, mas convém definir programaticamente e mostrar esse foco ainda.
perfil completo de James Westgate
7
$focusable:
  'a[href]',
  'area[href]',
  'button',
  'details',
  'input',
  'iframe',
  'select',
  'textarea',

  // these are actually case sensitive but i'm not listing out all the possible variants
  '[contentEditable=""]',
  '[contentEditable="true"]',
  '[contentEditable="TRUE"]',

  '[tabindex]:not([tabindex^="-"])',
  ':not([disabled])';

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:

  • Eu mudei :not([tabindex="-1"])para :not([tabindex^="-"])porque é perfeitamente plausível gerar-2 alguma forma. Melhor prevenir do que remediar, certo?
  • A adição :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!
  • Incluí :not([disabled])porque os elementos desativados nunca podem ser focados. Então, novamente, é inútil adicioná-lo a todos os elementos.
Dustin
fonte
7

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.)

ling
fonte
-2

O seletor: focus é permitido em elementos que aceitam eventos do teclado ou outras entradas do usuário.

http://www.w3schools.com/cssref/sel_focus.asp

Barreto Freekhealer
fonte
6
": o foco" significa que o elemento está atualmente focado, não que seja focalizável
jwebb