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.