son - todas las etiquetas de html y sus atributos

¿Qué elementos HTML pueden recibir atención?

Question

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

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

Answer 1

El: selector de enfoque está permitido en elementos que aceptan eventos de teclado u otras entradas del usuario.

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

Answer 2

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

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

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

[contentEditable=true]

Sin embargo, esto se usa muy raramente.

Answer 3

La biblioteca de accesibilidad ally.js proporciona una lista no oficial basada en pruebas aquí:

https://allyjs.io/data-tables/focusable.html

(NB: Su página no dice con qué frecuencia se realizaron las pruebas).

Answer 4

No hay una lista definida, depende del navegador. El único estándar que tenemos es DOM Level 2 HTML , según el cual los únicos elementos que tienen un método focus() 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 los siguientes:

• HTMLAnchorElement / HTMLAreaElement con un href
• HTMLInputElement / HTMLSelectElement / HTMLTextAreaElement / HTMLButtonElement pero no con disabled (IE realmente 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.

Answer 5

Tal vez este pueda ayudar:

function focus(el){
 el.focus();
 return el==document.activeElement;
}

valor de retorno: verdadero = éxito, falso = fallido

Reff: https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 6

$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 enfocados 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 -2 alguna manera. Mejor prevenir que lamentar, ¿verdad?
• Agregar :not([tabindex^="-"]) a todos los otros selectores enfocables es completamente inútil. Cuando use [tabindex]:not([tabindex^="-"]) ya incluye todos los elementos con los que estaría negando :not ¡ :not !
• Incluí :not([disabled]) porque los elementos deshabilitados nunca pueden ser enfocados. Así que de nuevo es inútil agregarlo a cada elemento.