son - todas las etiquetas de html y sus atributos
¿Qué elementos HTML pueden recibir atención? (6)
El: selector de enfoque está permitido en elementos que aceptan eventos de teclado u otras entradas del usuario.
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.
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.
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).
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.
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
$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-2alguna 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.