Naciśnięcie Enter zawsze przesyła formularz

Question

Mam proste pole tekstowe i typ przycisku na mojej stronie.

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

Przechwytywam kliknięcie przycisku za pomocą jQuery.

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

     ...do Stuff 

    }); 

Powyższy kod działa dobrze, o ile ręcznie kliknę przycisk. Zacząłem napotykać problemy, gdy chciałem użyć klawisza "Enter", aby kliknąć przycisk. Bez względu na to, co robię, nie mogę uniemożliwić klawiaturze Enter wykonywania jej domyślnej funkcji przesyłania.

Pierwszą rzeczą, którą zrobiłem, była zmiana typu wprowadzania danych z "submit" na "button".

Próbowałem ustawienie onSubmit postaci do onsubmit="return false;"

Próbowałem za pomocą jQuery do przechwytywania klawisz Enter zdarzenie:

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

każdym razem, kiedy nacisnąć klawisz Enter, to jakbym wysłaniu formularza cała strona odświeża się. Powyższy kod jQuery przechwytuje naciśnięcie klawisza "enter", ale formularz nadal przesyła i odświeża stronę.

Nie jestem pewien co się dzieje.

Answer 1

Musisz anulować akcję.

event.preventDefault(); 

ALE Uważam, że można tylko zabijać składanie formularza za pomocą keydown, a nie keyupu.

Answer 2

Epascarello ma rację, musisz anulować zgłoszenie, podając kod, który ci podał. Ale powinieneś również zmienić przycisk z powrotem na typ przesyłania, tak aby klawisz ENTER i Kliknięcie przycisku robiły to samo. W ten sposób musisz tylko obsłużyć anulowanie zgłoszenia w jednym obszarze.

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

JQuery:

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

     event.preventDefault(); 
     ...do Stuff 

    }); 

ten sposób jedna funkcja obsługuje klawisz ENTER, a następnie kliknij przycisk.

EDYCJA: Umieść event.preventDefault() jako pierwszą instrukcję.