Focus automático a input de HTML 5

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="//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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/