Evite que los usuarios envíen un formulario presionando Enter

773

Tengo una encuesta en un sitio web, y parece haber algunos problemas con los usuarios presionando enter (no sé por qué) y enviando accidentalmente la encuesta (formulario) sin hacer clic en el botón enviar. ¿Hay alguna manera de prevenir esto?

Estoy usando HTML, PHP 5.2.9 y jQuery en la encuesta.

DForck42
fuente
2
No utilice etiquetas de formulario y hacer la petición de encargo ajax :) Pero eso sí, puede seguir adelante con la llave-escucha y enfoque de prevención, eso es lo que haría ..
jancha
Simplemente no uso las etiquetas de formulario porque prefiero procesar formularios a través de solicitudes ajax de formas no convencionales (es decir: enviar algunos campos a medida que se eliminan sus focos, etc.). También puede hacer que un oyente especial capture la tecla Intro y la procese solo si desea hacerlo.
Juan

Respuestas:

881

Puedes usar un método como

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

Al leer los comentarios en la publicación original, para que sea más útil y permitir que las personas presionen Entersi han completado todos los campos:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});
Peter Mortensen
fuente
77
Actualmente solo estoy buscando una solución rápida y no tengo tiempo para implementar elementos de validación. Agradezco las respuestas de todos, pero esta es la que voy a utilizar mientras tanto. gracias.
DForck42
8
Este método es irreal porque evita que el usuario envíe el formulario presionando Intro mientras está enfocado en el botón Enviar. La mejor solución sería la de BalusC a continuación, donde enter se interrumpe solo mientras aún se enfoca en las entradas del formulario.
Anson Kao
3
He visto situaciones (solo en Internet Explorer) en las que debe vincularse keydownen documentlugar de windowpara que esto funcione.
MartinHN
8
Es posible que desee agregar && !$(document.activeElement).is('textarea')a la condición, o las nuevas líneas dentro de un área de texto están bloqueadas (al menos en IE).
Flash del
1
Esto funciona para mi. Pero esto también evita agregar una línea de corte en textarea.
César León
613

No permitir la tecla Intro en cualquier lugar

Si no tiene un <textarea>en su formulario, simplemente agregue lo siguiente a su <form>:

<form ... onkeydown="return event.key != 'Enter';">

O con jQuery:

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

Esto hará que cada pulsación de tecla dentro del formulario se verifique en el key. Si no es así Enter, volverá truey todo continuará como de costumbre. Si es Enterasí, volverá falsey todo se detendrá de inmediato, por lo que no se enviará el formulario.

Se keydownprefiere el evento keyupya que keyupes demasiado tarde para bloquear el envío del formulario. Históricamente también hubo el keypress, pero esto está en desuso, como es el KeyboardEvent.keyCode. En su KeyboardEvent.keylugar, debe usar lo que devuelve el nombre de la tecla que se está presionando. Cuando Enterestá marcado, entonces esto marcaría 13 (entrada normal) y 108 (entrada del teclado numérico).

Tenga en cuenta que, $(window)como se sugiere en algunas otras respuestas, en lugar de $(document)no funciona para keydown/ keyupen IE <= 8, entonces esa no es una buena opción si también desea cubrir a esos usuarios pobres.

Permitir la tecla Intro solo en áreas de texto

Si tiene un <textarea>en su formulario (que por supuesto debería aceptar la tecla Intro), entonces agregue el controlador keydown a cada elemento de entrada individual que no sea un <textarea>.

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

Para reducir el repetitivo, es mejor hacerlo con jQuery:

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

Si tiene otras funciones de controlador de eventos adjuntas en esos elementos de entrada, que también le gustaría invocar en la tecla Intro por alguna razón, solo evite el comportamiento predeterminado del evento en lugar de devolver falso, para que pueda propagarse correctamente a otros controladores.

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

Permitir la tecla Intro en áreas de texto y enviar solo botones

Si también desea permitir la tecla Intro en los botones de envío <input|button type="submit">, siempre puede refinar el selector de la siguiente manera.

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

Tenga en cuenta que, input[type=text]como se sugiere en algunas otras respuestas, no cubre esas entradas HTML5 que no son de texto, por lo que no es un buen selector.

BalusC
fuente
11
Ésta debe ser la respuesta buena, ya que también se ocupa de forma que incluye área de texto y explicar mejor la propagación de eventos
foobar
66
":input:not(textarea):not([type=submit]):not(button)"si está utilizando en <button>lugar de<input type=submit>
Simon_Weaver
Esto evita que la tecla enter funcione en cualquier entrada que no sea textarea. No es una buena solución
Mate.gwozdz
¿Se supone que debe haber un colon antes input?
xfactorial
1
@YodaDaCoda: acordado y ajustado.
BalusC
110

La sección 4.10.22.2 de envío implícito de la especificación HTML5 W3C dice:

formEl botón predeterminado de un elemento es el primer botón de envío en orden de árbol cuyo propietario de formulario es eseform elemento.

Si el agente de usuario admite permitir que el usuario envíe un formulario implícitamente (por ejemplo, en algunas plataformas presionando la tecla "enter" mientras un campo de texto está enfocado, envía implícitamente el formulario), y luego lo hace para un formulario cuyo botón predeterminado tiene una activación definida el comportamiento debe hacer que el agente de usuario ejecute pasos de activación de clic sintético en ese botón predeterminado .

Nota: en consecuencia, si el botón predeterminado está deshabilitado, el formulario no se envía cuando se utiliza dicho mecanismo de envío implícito. (Un botón no tiene comportamiento de activación cuando está desactivado).

Por lo tanto, una forma que cumple con los estándares para deshabilitar cualquier envío implícito del formulario es colocar un botón de envío deshabilitado como el primer botón de envío del formulario:

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

Una buena característica de este enfoque es que funciona sin JavaScript ; ya sea que JavaScript esté habilitado o no, se requiere un navegador web que cumpla con los estándares para evitar el envío implícito de formularios.

Daniel Trebbien
fuente
66
Errrr ... Esto es oro macizo. Si esto realmente funciona en varios navegadores, ¡merece ir a la cima! ¿Cómo pueden tantas personas haber respondido con variaciones de pulsación de teclas, pulsaciones de teclas, etc., pero se han perdido esta respuesta basada en estándares?
John Rees
44
Por un lado, es simple y evita todas las trampas sugeridas por las respuestas aceptadas. Por otro lado, se siente como una ligera explotación del estándar. Felicitaciones por incluir el atributo aria- *. Me encantaría escuchar más comentarios sobre esto.
Solvitieg
2
También funciona como <input type="submit" disabled style="display: none" aria-hidden="true" />y puede reducir el tamaño de su página en unos pocos caracteres. :-P
gaefan
77
IE 11 envía de todos modos.
CamaroSS
2
Safari es el nuevo IE.
twistedpixel
68

Tuve que atrapar los tres eventos relacionados con presionar teclas para evitar que se enviara el formulario:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

Puedes combinar todo lo anterior en una bonita versión compacta:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
Updadingdave
fuente
77
Puede encadenar los últimos 3 selectores o vincular múltiples eventos con un método como este $("#search").bind('keypress keyup keydown',preventSubmit);
Moak
Debido a que en un formulario web ASP.NET todo tiene que estar anidado en una <form>etiqueta, la tecla enter enviará el formulario ... Esta solución deshabilitó la tecla enter y solucionó el problema, ¡gracias @Dave! Luego habilité la tecla Intro para ciertos campos por id.
Ian Campbell
@Upgradingdave ¿Cómo puede escribir "log ()" en lugar de "console.log ()"?
radbyx
1
@radbyx ... buena captura, debería ser console.log, actualicé mi respuesta.
Updadingdave
Tenga en cuenta que con keypress keyup keydownusted activa cualquier código en la condición if dos veces .
Kai Noack
56

Si usa un script para realizar el envío real, puede agregar la línea "return false" al controlador de envío de esta manera:

<form onsubmit="return false;">

Llamar a submit () en el formulario desde JavaScript no activará el evento.

Tom Hubbard
fuente
Funciona para mí en Chrome, esto también deshabilitará los botones de envío, lo cual está bien si desea activar un evento onlick en el botón de envío. Sugerencia de Ajax: agregue su llamada de función antes de la devolución y el usuario aún puede presionar la tecla Intro sin enviar el formulario a la página.
Dennis Heiden
Trabajó para mí en Chrome, IE-11 y Firefox y fue la solución más sencilla de implementar. Desactivar la tecla Intro en secciones completas de la página, como hacen algunas respuestas, parece demasiado extremo y propenso a errores.
Roberto
Gracias. Funcionó para mí.
LU
23

Utilizar:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Esta solución funciona en todos los formularios de un sitio web (también en formularios insertados con Ajax), evitando solo Enters en los textos de entrada. Colóquelo en una función de documento listo y olvide este problema de por vida.

Buzogany Laszlo
fuente
Creo que la respuesta original e.whichestuvo bien; no es necesario cambiarlo a e.keyCode. Ambos devuelven el valor 13 para la tecla enter. Ver stackoverflow.com/a/4471635/292060 y stackoverflow.com/a/18184976/292060
goodeye
2
Esta solución se ocupa de dos soluciones: 1.) No envíe formularios al ingresar 2.) Permite ingresar en las
áreas de
21

En lugar de evitar que los usuarios presionen Enter, lo que puede parecer poco natural, puede dejar el formulario como está y agregar una validación adicional del lado del cliente: cuando la encuesta no finaliza, el resultado no se envía al servidor y el usuario recibe un mensaje agradable que dice lo que necesita ser terminado para completar el formulario. Si está utilizando jQuery, pruebe el complemento de Validación:

http://docs.jquery.com/Plugins/Validation

Esto requerirá más trabajo que Enterapretar el botón, pero seguramente proporcionará una experiencia de usuario más rica.

bbmud
fuente
13
Esto suena bien, pero los campos opcionales son problemáticos, el usuario puede presionar enter por error y se enviará el formulario. No veo cómo va a saber cuándo la encuesta no está terminada a menos que coloque todos los campos según sea necesario (no se permiten opciones predeterminadas, no se permiten campos en blanco ...)
Christophe Roussy
19

Una pequeña y agradable solución jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
Eonasdan
fuente
1
+1 Estaba buscando una alternativa jQuery, en lugar de usar JS normal comovar key = event.keyCode || event.which; if (key == 13) return false;
RaphaelDDL
1
técnicamente esto sigue siendo POJ solo con un contenedor jquery más simple. El código que has dado es casi lo mismo.
Eonasdan
19

Todavía no puedo comentar, así que publicaré una nueva respuesta

La respuesta aceptada es ok-ish, pero no dejaba de enviar en el teclado numérico enter. Al menos en la versión actual de Chrome. Tuve que modificar la condición del código clave para esto, luego funciona.

if(event.keyCode == 13 || event.keyCode == 169) {...}
sparklos
fuente
55
La diferencia entre Intro y Retorno: muchos operadores de puntos de venta usan el teclado numérico exclusivamente. +1
helloserve
8
Ahora (21/05/2015) , tanto para el ingreso normal como para el ingreso del teclado numérico, el código clave es 13 [Chrome 42, IE 11, FIreFox 36]
Cliff Burton
15

Es mi solución para alcanzar el objetivo, es limpio y efectivo.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});
Desarrollador
fuente
13

Un enfoque completamente diferente:

  1. El primero <button type="submit">en el formulario se activará al presionar Enter.
  2. Esto es cierto incluso si el botón está oculto con style="display:none;
  3. El script para ese botón puede regresar false , lo que anula el proceso de envío.
  4. Todavía puede tener otro <button type=submit>para enviar el formulario. Simplemente regrese truea la presentación en cascada.
  5. Al presionar Entermientras el botón de envío real está enfocado, se activará el botón de envío real.
  6. Al presionar Enterdentro <textarea>u otros controles de forma se comportará de manera normal.
  7. Al presionar Enterdentro de los <input>controles de formulario, se activará el primero <button type=submit>, que regresa falsey, por lo tanto, no sucede nada.

Así:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>
Erics
fuente
1
Hmm, en Chrome y Firefox, una versión aún más corta sería <button disabled style = "display: none;"> <button>, que también tiene la virtud de no requerir que JS funcione. Safari simplemente ignora el botón y entonces otras cosas sucederán normalmente.
Erics
1
Realmente no me gustó la forma de "ignorar 13 códigos clave", así que empecé a pensar en una forma fácil y complicada, y esta idea se me ocurrió y, mientras me desplazaba por esta página, vi este hilo :). Más uno para ideas mutuas y, por supuesto, la mejor solución.
Jalali Shakib
La respuesta perfecta para mi. Quería un formulario para emular una CLI para que el usuario presione enter para cada campo siguiente y luego enviar al final.
nathan
oh genial, el último botón puede ser así para evitar la duplicación de enviar en clics rápidos:<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
Arash Moosapour
@ArashMoosapour, por favor no deshabilite los botones de envío si tienen foco, ya que deja de enfocar y es un desastre para la accesibilidad.
Erics
9

Dando al formulario una acción de 'javascript: void (0);' Parece funcionar

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>
sidarcy
fuente
8

No poner un botón de enviar podría hacer. Simplemente coloque un script en la entrada (tipo = botón) o agregue eventListener si desea que envíe los datos en el formulario.

Más bien usa esto

<input type="button">

que usar esto

<input type="submit">
Jimwel Anobong
fuente
8
  1. No use type = "submit" para entradas o botones.
  2. Use type = "button" y use js [Jquery / angular / etc] para enviar el formulario al servidor.
Irfan Ashraf
fuente
7

Necesitaba evitar que solo se enviaran entradas específicas, por lo que utilicé un selector de clase, para permitir que esta sea una característica "global" donde sea que la necesite.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Y este código jQuery:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternativamente, si el keydown es insuficiente:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Algunas notas:

Modificando varias buenas respuestas aquí, la Enterclave parece funcionar keydownen todos los navegadores. Para la alternativa, actualicé bind()el on()método.

Soy un gran admirador de los selectores de clase, sopesando todos los pros y los contras y las discusiones de rendimiento. Mi convención de nomenclatura es 'idSomething' para indicar que jQuery lo está utilizando como id, para separarlo del estilo CSS.

buen ojo
fuente
Esto funciona en los elementos del cuadro de texto en el formulario. A medida que escribe y presiona Intro en el cuadro de texto, el comportamiento predeterminado envía el formulario. Esto intercepta la tecla enter y evita que se envíe.
goodeye 01 de
5

Puede hacer un método de JavaScript para verificar si se Enterpresionó la tecla y, si es así, para detener el envío.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Simplemente llame a eso en el método de envío.

Brandon
fuente
4

SÓLO ENVIAR BLOQUEO, pero no otra funcionalidad importante de la tecla Intro, como la creación de un nuevo párrafo en un <textarea>:

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}
input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}
<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

mate.gwozdz
fuente
preguntándose quién y por qué rechazaría esto: | ¿Cuál es el problema con mi solución?
mate.gwozdz
Votado por la contribución. La respuesta aceptada rompe la mayor parte de la interfaz de usuario, evitando que "enter" se registre en toda la aplicación. No está bien. Creo que es una buena idea permitir que la entrada se maneje en elementos de formulario, en particular botones, por lo que me gusta la ruta que está siguiendo. Sin embargo, creo que esto se puede lograr sin un tiempo de espera. Por ejemplo, solo mire el atributo del elemento en su controlador de eventos. Permitir 'botón' y 'enviar'
Solvitieg
@NathanCH: este código hace exactamente lo contrario de lo que estás diciendo. Es sólo impide entrar desde la presentación de la forma y no impide que cualquier otra funcionalidad - por ejemplo, es posible que tenga un campo de texto y desea utilizar para crear introducir nuevos párrafos.
mate.gwozdz
1
Hay un error tipográfico en la primera línea. En lugar de function(e)eso debería ser function(event). De lo contrario, funciona para mí. Gracias.
Guillermo Prandi
1
Este es un salvavidas absoluto, ya que todo lo demás me impide manejar adecuadamente los eventos de guardar para cosas como las ediciones en línea de la cuadrícula. La única sugerencia es no usar 'setTimeout' en absoluto. Creo que ese es el problema que la gente tiene con esta respuesta. Es muy quisquilloso. En cambio, para el evento do on("keydown", function(event) { enterPressed = true; }y luego en el evento de envío, do on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}Esto asegurará que funcione sin importar la demora.
Curtis Snowden
3

Esta es la manera perfecta, no será redirigido desde su página

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});
Rifkan Razak
fuente
2

Tuve un problema similar, donde tenía una cuadrícula con "campos de texto ajax" (Yii CGridView) y solo un botón de envío. Cada vez que hice una búsqueda en un campo de texto y presioné, ingrese el formulario enviado. Tuve que hacer algo con el botón porque era el único botón común entre las vistas (patrón MVC). Todo lo que tenía que hacer era quitar type="submit"y poneronclick="document.forms[0].submit()

StackUnder
fuente
2

Creo que está bien cubierto con todas las respuestas, pero si está utilizando un botón con algún código de validación de JavaScript, puede configurar onpresspress del formulario para Enter para llamar a su envío como se esperaba:

<form method="POST" action="..." onkeypress="if(event.keyCode == 13) mySubmitFunction(this); return false;">

El onkeypress JS podría ser lo que necesite hacer. No hay necesidad de un cambio global más grande. Esto es especialmente cierto si usted no es el que codifica la aplicación desde cero, y ha sido reparado el sitio web de otra persona sin desarmarlo y volver a probarlo.

ajo
fuente
Me doy cuenta de que es una variante de la respuesta de Tom Hubbard, que hice +1 porque es lo que hice yo mismo hoy antes de buscar SO para otras ideas.
Ajoman
2

Ya hay muchas buenas respuestas aquí, solo quiero aportar algo desde una perspectiva UX. Los controles del teclado en los formularios son muy importantes.

La pregunta es cómo deshabilitar el envío al presionar una tecla Enter. No cómo ignorar Enteren una aplicación completa. Por lo tanto, considere adjuntar el controlador a un elemento de formulario, no a la ventana.

La desactivación Enterpara el envío del formulario aún debe permitir lo siguiente:

  1. Envío de formulario a través del Enterbotón Enviar está enfocado.
  2. Envío de formulario cuando se rellenan todos los campos.
  3. Interacción con botones no enviados a través de Enter.

Esto es simplemente repetitivo pero sigue las tres condiciones.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type);
  if ($attr === 'button' || $attr === 'submit') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Solvitieg
fuente
1

Algo que no he visto respondió aquí: cuando pasas por los elementos de la página, presionar Entercuando llegas al botón de envío activará el controlador de envío en el formulario, pero registrará el evento como un evento de mouse. Aquí está mi solución corta para cubrir la mayoría de las bases:

Esta no es una respuesta relacionada con jQuery

HTML

<form onsubmit="return false;" method=post>
  <input type="text" /><br />
  <input type="button" onclick="this.form.submit()" value="submit via mouse or keyboard" />
  <input type="button" onclick="submitMouseOnly(event)" value="submit via mouse only" />
</form>

JavaScript

window.submitMouseOnly=function(evt){
    let allow=(evt instanceof MouseEvent) && evt.x>0 && evt.y>0 && evt.screenX > 0 && evt.screenY > 0;
    if(allow)(evt.tagName=='FORM'?evt.target:evt.target.form).submit();
}

Para encontrar un ejemplo de trabajo: https://jsfiddle.net/nemesarial/6rhogva2/

Nemesarial
fuente
0

En mi caso específico, tuve que evitar que ENTER enviara el formulario y también simular el clic del botón Enviar. Esto se debe a que el botón Enviar tenía un controlador de clics porque estábamos dentro de una ventana modal (código antiguo heredado). En cualquier caso, aquí están mis soluciones combinadas para este caso.

    $('input,select').keypress(function(event) {
        // detect ENTER key
        if (event.keyCode == 13) {
            // simulate submit button click
            $("#btn-submit").click();
            // stop form from submitting via ENTER key press
            event.preventDefault ? event.preventDefault() : event.returnValue = false;
        }
    });

Este caso de uso es específicamente útil para las personas que trabajan con IE8.

Roca
fuente
0

Esto funciona para mi

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});
Pjl
fuente
0

Me gustaría agregar un pequeño código CoffeeScript (no probado en el campo):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(Espero que les guste el buen truco en la cláusula de a menos.)

edx
fuente
0

Usando Javascript (sin marcar ningún campo de entrada):

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        e.preventDefault();
        return false;
    }
}, true);
</script>

Si alguien quiere aplicar esto en campos específicos, por ejemplo, ingrese texto de tipo:

<script>
window.addEventListener('keydown', function(e) {
    if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) {
        if (e.target.nodeName == 'INPUT' && e.target.type == 'text') {
            e.preventDefault();
            return false;
        }
    }
}, true);
</script>

Esto funciona bien en mi caso.

Waqar Alamgir
fuente
0

Vaya a su CSS y agréguelo, luego bloqueará automáticamente el envío de su formulario siempre que haya enviado una entrada si ya no la desea, puede eliminarla o escribir activatey, en su deactivatelugar

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }
Lars Gross
fuente
0

También puede usar javascript:void(0)para evitar el envío de formularios.

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Nisharg Shah
fuente
no funciona cuando tiene específicamente method="post"en su formulario. Por ejemplo, quiero que el formulario se envíe mediante botones, pero no cuando presione enter mientras está enfocado en la entrada.
Souleste
para esa condición, puede usar las respuestas anteriores porque esta respuesta se basa en evitar el envío del formulario ingresando y haciendo clic en ambos. ejemplo anterior tiene method="post"en forma y sus trabajos, verifique nuevamente.
Nisharg Shah
-2

Esto me ha funcionado en todos los navegadores después de mucha frustración con otras soluciones. La función externa name_space es solo para evitar declarar globales, algo que también recomiendo.

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

Uso de la muestra:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});
crizCraig
fuente
-2

Utilizar:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>
Tapas Pal
fuente