Al presionar Enter Always Submits Form

Question

Tengo un cuadro de texto simple y entrada de tipo de botón en mi página.

<input id="sText" type="text" /> 
<input id="sButton" type="button" value="button" /> 

Capturo un botón, haga clic con jQuery.

$("[id$=sButton]").click(function() { 

     ...do Stuff 

    }); 

El código anterior funciona bien siempre que haga clic manualmente en el botón. Comencé a tener problemas cuando quería usar la tecla "enter" para hacer clic en el botón. No importa lo que haga, no puedo evitar que la tecla Enter ejecute su función de envío predeterminada.

Lo primero que hice fue cambiar el tipo de entrada de "enviar" a "botón".

Intenté fijar onsubmit del formulario a onsubmit="return false;"

He intentado utilizar jQuery para capturar al entrar evento clave:

$("#sText").keyup(function (event) { 
     if (event.keyCode == 13) { 
      alert("Enter!"); 
      // $("#sButton").click(); 
     } 
    }); 

Cada vez que pulse la tecla Intro, es como si estuviera enviando el formulario , la página completa se actualiza. El código jQuery anterior captura la pulsación de tecla "enter", pero el formulario aún envía y actualiza la página.

No estoy seguro de qué está pasando.

Answer 1

Debe cancelar la acción.

event.preventDefault(); 

pero creo que sólo se puede matar el envío del formulario con keydown, no keyUp.

Answer 2

Epascarello tiene razón, debe cancelar el envío con el código que le dio. Pero también debe cambiar el botón a un tipo de envío para que la tecla ENTRAR y Hacer clic en el botón hagan lo mismo. De esta forma, solo debe gestionar la cancelación del envío en un área.

<input id="sButton" type="submit" value="Submit" /> 

JQuery:

$("#YourFormId").submit(function(event){ 

     event.preventDefault(); 
     ...do Stuff 

    }); 

De esta manera se maneja la función de la tecla ENTER y el botón de clic.

EDITAR: coloca el event.preventDefault() como la primera instrucción.