Cómo usar el atributo Autofocus de HTML

html

Mediante HTML5 podrás realizar ciertas tareas sin necesidad de JavaScript. Por ejemplo, podrás posicionar el cursor del usuario en algún campo automáticamente mediante el atributo autofocus.

Si usas el atributo autofocus en una etiqueta input, el cursor del usuario se posicionará automáticamente en este campo cuando la página se cargue. Para ello, debes establecer el valor del atributo autofocus como autofocus, como en el siguiente ejemplo:

<input autofocus="autofocus" />

El atributo autofocus también puede usarse sin ningún valor, en cuyo caso tendrá su valor por defecto, que es autofocus:

<input autofocus />

Un ejemplo real de uso del atributo autofocus podría ser el siguiente, en el que tenemos un formulario con diferentes campos y queremos que el cursor del usuario se posicione por defecto en alguno de ellos:

<form action="/destino">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" autofocus><br><br>
  <label for="apellido">Apellido:</label>
  <input type="text" id="apellido" name="apellido"><br><br>
  <input type="submit">
</form>

El atributo autofocus es ya soportado por la mayor parte de los navegadores:

  • Google Chrome: Desde la versión 5
  • Internet Explorer: Desde la versión 10
  • Mozilla Firefox: Desde la versión 4
  • Safari: Desde la versión 5
  • Opera: Desde la versión 9.6

Y esto ha sido todo.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”