Evitar submitir un formulario al pulsar la tecla enter

Aquí te dejo una solución óptima para tratar este caso. Simplemente se trata de detectar las teclas que el usuario pulsa mientras está en el campo de texto y si pulsa enter, simplemente no hacer nada, haciendo que el evento se prevenga, usando el método preventDefault() sobre el objeto evento.

Te paso un ejemplo completo con el formulario y el script para evitar que el formulario se envie (evitar submitir) cuando se pulsa enter sobre cualquier campo de texto.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Prevenir enviar el formulario al pulsar enter en los campos de texto</title>
</head>
<body>
  <h1>Prevenir enviar el formulario al pulsar enter en los campos de texto</h1>
  <form action="#">
    Nombre: <input type="text" name="nombre">
    <br>
    Apellidos: <input type="text" name="apellidos">
    <br>
    <input type="submit" value="Enviar">
  </form>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelectorAll('input[type=text]').forEach( node => node.addEventListener('keypress', e => {
        if(e.keyCode == 13) {
          e.preventDefault();
        }
      }))
    });
  </script>
</body>
</html>

Miguel Angel

3310 147 216 17

Evitar submitir un formulario al pulsar la tecla enter

Respuestas