En este post sobre formularios HTML y JavaScript vamos a ver cómo prevenir que el form sea enviado al presionar la tecla Enter; para ello se usará JavaScript o un simple atributo HTML.
Prevenir envío de formulario
Lo que tenemos que hacer es escuchar el evento keydown del input en cuestión, y detectar si se presionó la tecla Enter. En caso de que sí, prevenimos el comportamiento con preventDefault.
Para obtener una referencia al elemento puedes utilizar getElementById, querySelector, etcétera. Yo usaré querySelector y queda así:
const $nombre = document.querySelector("#nombre");
// Escuchamos el keydown y prevenimos el evento
$nombre.addEventListener("keydown", (evento) => {
if (evento.key == "Enter") {
// Prevenir
evento.preventDefault();
return false;
}
});En este caso estamos previniendo que se envíe cuando se presiona enter en el input que tiene el id nombre. Podemos ver el HTML así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prevenir enter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="." method="get">
<input id="nombre" name="nombre" type="text" placeholder="Nombre">
<br><br>
<button type="submit">Enviar</button>
</form>
<script src="script.js"></script>
</body>
</html>Verás que si presionas Enter, el formulario no se envía, y que solo lo hace cuando presionas el botón destinado al envío.
Varios input
Igualmente podrías desactivar este comportamiento para todos los input.
Para ello recomiendo colocarles determinada clase (de igual forma podría hacerse global a los input, pero en ocasiones es mejor hacerlo por separado) y luego obtener los elementos con querySelectorAll.
Comenzamos definiendo nuestro formulario:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prevenir Enter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="." method="get">
<input class="prevenir-envio" name="nombre" type="text" placeholder="Nombre">
<br><br>
<input class="prevenir-envio" name="correo" type="email" placeholder="Correo electrónico">
<br><br>
<button type="submit">Enviar</button>
</form>
<script src="script.js"></script>
</body>
</html>Fíjate en que nuestros campos del formulario tienen la clase prevenir-envio; ahora obtenemos una referencia a todos esos elementos y por cada uno le agregamos el listener:
const $elementos = document.querySelectorAll(".prevenir-envio");
$elementos.forEach(elemento => {
elemento.addEventListener("keydown", (evento) => {
if (evento.key == "Enter") {
// Prevenir
evento.preventDefault();
return false;
}
});
});
Lo que hacemos es usar forEach en combinación de las arrow functions para agregar el listener a cada input. Es decir, hacemos para todos lo que hicimos en el ejemplo del input individual.
Desactivar envío con Enter en formulario completo
Este truco solo funciona en caso de que tu formulario no tenga ningún textarea (pues si los tiene, no se podrá colocar una nueva línea). Simplemente indicamos que si la tecla es Enter no se haga nada agregando el atributo onkeydown:
<form onkeydown="return event.key != 'Enter';" action="." method="get">En este caso ya no necesitamos JavaScript, pues lo estamos indicando desde el HTML. De igual modo dejo el código completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prevenir Enter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form onkeydown="return event.key != 'Enter';" action="." method="get">
<input name="nombre" type="text" placeholder="Nombre">
<br><br>
<input name="correo" type="email" placeholder="Correo electrónico">
<br><br>
<button type="submit">Enviar</button>
</form>
<script src="script.js"></script>
</body>
</html>