En este post te mostraré a usar el atributo autofocus de los input en HTML para dar un focus automático a los elementos, es decir, dar focus a un campo de texto cuando se carga la página, sin usar JavaScript.

Nota: si quieres enfocar un elemento de manera programada, utiliza JavaScript y la función focus.

Atributo autofocus en HTML 5

Para que un input esté enfocado, hay que definir el atributo autofocus. Esta propiedad es booleana, es decir, el atributo no lleva ningún valor, basta con que esté presente.

<input autofocus type="text" placeholder="Con autofocus"/>

De esta manera el input va a obtener el foco o será enfocado al entrar a la página. Veamos un ejemplo:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Autofocus</title>
</head>

<body>
	<a href="https://parzibyte.me/blog/">By Parzibyte</a>
	<br>
	<input type="text" placeholder="Sin autofocus"/>
	<br><br>
	<input autofocus type="text" placeholder="Con autofocus"/>
  </body>
</html>

En este caso un input tiene el focus automático y otro no.

Atributo autofocus en HTML
Si el post ha sido de tu agrado te invito a que me sigas para saber cuando haya escrito un nuevo post, haya actualizado algún sistema o publicado un nuevo software. Facebook | X | Instagram | Telegram | También estoy a tus órdenes para cualquier contratación en mi página de contacto