cómo utilizar focus() en un textarea con jQuery le eché también un vistazo al método focus() nativo de jаvascript. 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 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 iten 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 5vi5v


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 iten el método focus(), los elementos <a>, <link>, elementos de formularios (<input>, <button>, <select>, <textarea>) e <iframe>.
Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas... 2c611u