Estoy buscando una lista definitiva de elementos HTML que puedan enfocar, es decir, qué elementos se enfocarán cuando se les llame a focus()?¿Qué elementos HTML pueden recibir atención?
Estoy escribiendo una extensión jQuery que funciona en 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.
No hay una lista definitiva, 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 notablemente omite HTMLButtonElement y HTMLAreaElement. navegadores
de hoy definen focus() en HTMLElement, sino un elemento no van a tomar realmente el foco a menos que sea uno de:
disabled (IE realmente le da un error si lo intenta), y las cargas de archivos tienen un comportamiento inusual por razones de seguridadtabindex... a menos que el tabindex es -1, lo que hace imposible concentrarse.
Es probable que haya otras excepciones sutiles y adiciones a este comportamiento dependiendo del navegador.
Aquí tengo un selector de CSS-basado en bobince 's answer 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 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 */
}
}
He añadido como una respuesta, porque eso era lo que estaba buscando, cuando Google me redirigió a esta pregunta de Stackoverflow.
EDIT: Hay un selector más, que es enfocable:
[contentEditable=true]
Sin embargo, esto se utiliza muy raramente.
@TWiStErRob: su selector no tiene como objetivo los mismos elementos que los selectores de @ ReeCube, porque el suyo no incluye elementos que no tienen un conjunto de tabindex establecido explícitamente. Por ejemplo, 'Bar' es ciertamente enfocable porque es un elemento 'a' que tiene un atributo' href'. Pero su selector no lo incluye. – jbyrd
@jbyrd que fue solo una llamada de edición basada en la declaración de bobince: "... a menos que el tabindex sea -1, lo que hace que el enfoque sea imposible", 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 incoherencias del navegador). –
El selector de enfoque está permitido en elementos que aceptan eventos de teclado u otras entradas de usuario.
": focus" significa que el elemento está actualmente enfocado, no es que sea enfocable – jwebb
$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 de todos los elementos SCSS enfocable y pensé que esto podría ayudar a alguien debido a un ranking de Google a esta pregunta.
Un par de cosas a tener en cuenta:
:not([tabindex="-1"]):not([tabindex^="-"]) porque es perfectamente plausible para generar -2 de alguna manera. Más vale prevenir que lamentar ¿no?:not([tabindex^="-"]) a todos los otros selectores enfocables es completamente inútil. ¡Al usar [tabindex]:not([tabindex^="-"]), ya incluye todos los elementos que negaría con :not!:not([disabled]) porque los elementos desactivados pueden nunca ser enfocables. Entonces de nuevo es inútil agregarlo a cada elemento.La biblioteca de la accesibilidad ally.js proporciona una lista no oficial, a base de prueba aquí:
https://allyjs.io/data-tables/focusable.html
(NB: Su página no dice con qué frecuencia se realizaron las pruebas.)
Cualquier idea cómo obtener todo esto con jQuery? Véase también http://stackoverflow.com/questions/7668525/is-there-a-jquery-selector-to-get-all-elements-that-can-get-focus – ripper234
Encontré algunos resultados interesantes: http: // jsfiddle.net/B7gn6/ me sugiere que attrib "tabindex" no es suficiente para trabajar en Chrome al menos. –
@jon: esos elementos tabindex realmente aceptan foco, si intentas hacer clic en ellos. Probar '.is (': focus')' no es confiable - jQuery implementa su propia prueba para ': focus' en Chrome, que es lo que realmente está probando aquí. Ese código jQuery no es confiable/funciona mal ('~ tabIndex' ...?! Eso no va a funcionar ...) – bobince