1

Estoy usando la biblioteca de entrada de etiquetas de Bootstrap, pero no puedo evitar enviar el formulario al presionar Enter. Al presionar enter, el cursor debe permanecer en ese mismo campo. He utilizado varios códigos pero sin éxito.

<div class="input-group">
     <div class="input-group-addon">
         <i class="fas fa-exchange-alt"></i>
     </div>
      <input type="text" name="post_tags" class="form-control form-control-md" data- 
      role="tagsinput" placeholder="add tags" value="" onkeydown="pulse(event)" required>
</div>

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

});

  <script>/* No funciona*/
  function pulse(e) {
  if (e.which === 13 && !e.shiftKey) {
   e.preventDefault();
   console.log('prevented');
   return false;
 }

}

2 respuestas 2

2

Para deshabilitar en envío automático del formulario cuando se pulsa ENTER, puedes añadir un button[type="submit"] desabilitado y oculto al principio del formulario que capture y detenga el evento. Ahora tendrás que pulsar el botón de envío que tengas al efecto o gestionarlo mediante javascript.

Este método no requiere javascript, el código que uso es:

<form ...>
    <button type="submit" disabled class="none" aria-hidden="true"></button>

donde la clase none equivale a display:none, usa la equivalente de bootstrap. O se puede añadir el atributo hidden:

<form ...>
    <button type="submit" disabled hidden aria-hidden="true"></button>
0

Esta es mi solución

 //evitar que cualquier campo de texto envie el formulario despues de dar enter
        document.addEventListener('DOMContentLoaded', () => {
            document.querySelectorAll('input[type=text]').forEach( node => node.addEventListener('keypress', e => {
                if(e.keyCode == 13) {
                e.preventDefault();
                }
            }))
        });
 <!DOCTYPE html>

<html>

<head>

<title>Los campos de texto no envían el formulario</title>

</head>

<body>

<form method="post" action="" enctype="multipart/form-data">

Ingresa el archivo:

<input name="usuario" type="text" placeholder="Usuario" />
<input name="usuario" type="password" placeholder="Contraseña" />

</form>

</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.