¿Qué elementos admiten el método focus()? JavaScript

  • Publicado el 5 mayo, 2015 - Actualizado el

Cuándo escribí el post sobre cómo utilizar focus() en un textarea con jQuery le eché también un vistazo al método focus() nativo de JavaScript. Y me surgió la pregunta: ¿En qué elementos se puede utilizar? Me parecía una pregunta con respuesta obvia, pero no lo es tanto y tiene algunos detalles que merece la pena conocer.

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://algundomino.com" id="mienlace">Ir a Algún Dominio!!!</a>
<script>
  var elemento = document.getElementById( "mienlace" );
  // Enfocar el enlace
  elemento.focus();
</script>

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

Si estás interesado en las especificaciones anteriores, puedes echar un vistazo al DOM Level 2 HTML.