En primer lugar, recordar que el método focus() enfoca el elemento seleccionado, lo que implica que las acciones de interacción con el usuario se aplican a este elemento, por ejemplo las acciones de teclado. Si no hay ningún elemento enfocado las acciones se aplican al elemento <body>, si existe, o en su defecto al elemento raíz del documento. Por ejemplo, con el siguiente código el enlace quedaría enfocado y si pulsamos «Enter» la acción se aplicará al enlace y el navegador lo seguirá:
<a href="http://tudomino.com" id="mienlace">Ir a Algún Dominio!!!</a>
<script>
var elemento = document.getElementById( "mienlace" );
// Enfocar el enlace
elemento.focus();
</script>
Ver demostración...
Si tomamos como referencia las recomendaciones del W3C y la descripción de los elementos enfocables, podemos sacar la siguiente conclusión sobre los elementos que admiten el método focus():
- Cada navegador/plataforma define el método focus a nivel de elemento (interface HTMLElement).
- Para que el elemento sea enfocable ha de tener establecido el tabindex focus flag.
- El navegador ha de establecer el tabindex focus flag de forma predeterminada para los siguientes elementos:
- <a> con atributo href
- <link> con atributo href
- <button>, <select> y <textarea>
- <input>, excepto si el atributo type es igual a hidden
- Contenedores de diferentes contextos de navegación (por ejemplo <iframe>)
- Otros elementos o secciones editables (definidos mediante el HTML Editing API)
- Según las especificaciones de WHATWG, también ha de ser enfocable cualquier elemento <th> en el que se implemente la interfaz de ordenación o clasificación.
- Para establecer el tabindex focus flag en cualquier otro elemento hay que especificar el atributo tabindex con un valor entero superior o igual a cero. Es decir, todo elemento con un taindex superior o igual a cero se hace enfocable. Si tabindex es menor a cero el elemento NO es enfocable.
- Los elementos inertes o desactivados (por ejemplo, con el atributo disabled) no son enfocables.
- El elemento enfocado recibe la pseudo-clase :focus
Resumiendo
Lo que más te puede interesar, a grandes rasgos y muy resumido, es que cualquier elemento puede ser enfocable si se establece un tabindex igual o superior a cero y que de forma predeterminada son enfocables, y por tanto admiten el método focus(), los elementos <a>, <link>, elementos de formularios (<input>, <button>, <select>, <textarea>) e <iframe>.
Comentarios