¿Qué elementos HTML pueden recibir foco?


248

Estoy buscando una lista definitiva de elementos HTML que pueden enfocarse, es decir, ¿qué elementos se enfocarán cuando focus()se los llame?

Estoy escribiendo una extensión jQuery que funciona en elementos que pueden enfocarse. Espero que la respuesta a esta pregunta me permita ser específico sobre los elementos a los que me dirijo.

Respuestas:


337

No hay una lista definitiva, depende del navegador. El único estándar que tenemos es DOM Nivel 2 HTML , según el cual los únicos elementos que tienen un focus()método son HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement y HTMLAnchorElement. Esto omite notablemente HTMLButtonElement y HTMLAreaElement.

Los navegadores de hoy definen focus()en HTMLElement, pero un elemento no se enfocará a menos que sea uno de:

  • HTMLAnchorElement / HTMLAreaElement con un href
  • HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement pero no con disabled(IE en realidad te da un error si lo intentas), y las cargas de archivos tienen un comportamiento inusual por razones de seguridad
  • HTMLIFrameElement (aunque enfocarlo no hace nada útil). Otros elementos de incrustación también, tal vez, no los he probado todos.
  • Cualquier elemento con un tabindex

Es probable que haya otras excepciones sutiles y adiciones a este comportamiento dependiendo del navegador.


2
Encontré algunos resultados interesantes: jsfiddle.net/B7gn6 me sugiere que el atributo "tabindex" no es suficiente para funcionar en Chrome al menos ..
Jon z

19
Que el atributo tabindex "permite a los autores controlar si se supone que un elemento puede enfocarse" está estandarizado en HTML5: w3.org/TR/html5/... Básicamente, un valor de 0 hace que el elemento sea enfocable pero deja su orden al navegador .
natevw

77
Todos los elementos con element.isContentEditable === trueson enfocables también. Tenga en cuenta que IE -10 (11+?) Puede enfocar cualquier elemento con bloque de visualización o tabla (div, span, etc.).
mems

14
Un elemento con un índice tabin de -1 puede recibir el enfoque mediante programación a través del método de enfoque; simplemente no se puede tabular.
jessebeach

55
… A menos que el índice de tabulación sea -1, lo que hace que el enfoque sea imposible >> no es cierto, si el índice de tabulación es -1, es posible enfocar HACIENDO CLIC, pero enfocar presionando "tab" es imposible. -1 hace que un elemento sea enfocable, solo que no se agrega en el orden de tabulación. Consulte: jsfiddle.net/0jz0kd1a , primero intente hacer clic en el elemento, luego cambie tabindex a 0 e intente usar tab.
daremkd

37

Aquí tengo un selector CSS basado en la respuesta de bobince para seleccionar cualquier elemento HTML enfocable :

  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 */
  }

o un poco más bella en 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 */
    }
}

Lo agregué como respuesta, porque eso era lo que estaba buscando cuando Google me redirigió a esta pregunta de Stackoverflow.

EDITAR: hay un selector más, que es enfocable:

[contentEditable=true]

Sin embargo, esto se usa muy raramente.


@TWiStErRob: su selector no apunta a los mismos elementos que los selectores de @ ReeCube, porque el suyo no incluye elementos que no tengan un índice de tabulación establecido explícitamente. Por ejemplo, <a href="foo.html">Bar</a>es enfocable porque es un aelemento que tiene un hrefatributo. Pero su selector no lo incluye.
jbyrd

@jbyrd que fue solo un llamado para editar basado en la declaración de bobince: "... a menos que el índice de tabla sea -1, lo que hace imposible el enfoque", nunca se suponía que reemplazara la respuesta de ReeCube; ver el historial de edición.
TWiStErRob

SASS (o CSS) es una forma adecuada para proporcionar una respuesta rigurosa a la pregunta anterior (salvo las inconsistencias del navegador).
Roy Tinker

tabindex="-1"no no hacer que un elemento unfocusable, simplemente no puede ser enfocado por tabulación. Todavía puede recibir foco haciendo clic en él o programáticamente con HTMLElement.focus(); lo mismo para cualquier otro número negativo. Ver: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/…
Lazzaro

No excluiría elementos con tabindex-1. Los usuarios no podrán enfocar a través de ningún dispositivo de entrada, pero es posible que desee configurar y mostrar ese enfoque de manera programática.
James Westgate el

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])';

Estoy creando una lista SCSS de todos los elementos enfocables y pensé que esto podría ayudar a alguien debido al rango de Google de esta pregunta.

Algunas cosas a tener en cuenta:

  • Cambié :not([tabindex="-1"])a :not([tabindex^="-"])porque es perfectamente plausible generar de -2alguna manera. Más vale prevenir que curar, ¿verdad?
  • Agregar :not([tabindex^="-"])a todos los otros selectores enfocables es completamente inútil. ¡Al usarlo [tabindex]:not([tabindex^="-"])ya incluye todos los elementos con los que estaría negando :not!
  • Incluí :not([disabled])porque los elementos deshabilitados nunca pueden ser enfocables. De nuevo, es inútil agregarlo a cada elemento.



Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.