Uniemożliwić użytkownikom przesyłanie formularza, naciskając Enter

Wyłącz klawisz enter w dowolnym miejscu

Jeśli nie masz <textarea> w formularzu, po prostu dodaj do swojego <form>:

<form ... onkeypress="return event.keyCode != 13;">

Lub z jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

Spowoduje to, że każde naciśnięcie klawisza wewnątrz formularza będzie sprawdzane na kodzie klawiatury. Jeśli nie jest to 13 (klawisz Enter), to zwróci true i wszystko pójdzie zgodnie z oczekiwaniami. Jeśli jest to 13 (klawisz Enter), wtedy zwróci false i wszystko natychmiast się zatrzyma, więc formularz nie będzie / align = "left" /

Zdarzenie keypress jest preferowane zamiast keydown, ponieważ jest wywoływane tylko wtedy, gdy znak jest rzeczywiście wstawiany. keydown (i keyup) są wywoływane po naciśnięciu dowolnego klawisza, w tym klawiszy sterujących. I, keyCode z keypress reprezentuje rzeczywisty znak, który jest wstawiany, a nie używany klucz fizyczny. W ten sposób nie trzeba jawnie sprawdzać, czy Klawisz Numpad Enter Jest wciśnięty (108). keyup jest za późno, aby zablokować formularz submit.

Zauważ, że $(window) jako sugerowane w innych odpowiedziach zamiast $(document) nie działa dla keydown/keypress/keyup W IE

Zezwalaj na klawisz enter tylko na textareas

Jeśli masz <textarea> w formularzu (który oczywiście powinien zaakceptować klawisz Enter), dodaj obsługę klawiatury do każdego elementu wejściowego, który nie jest <textarea>.

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

Aby zmniejszyć boilerplate, to lepiej zrobić z jQuery:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

Jeśli na tych elementach wejściowych są dołączone inne funkcje obsługi zdarzeń, które z jakiegoś powodu chcesz wywołać przy pomocy klawisza enter, zapobiegaj tylko domyślnemu zachowaniu zdarzenia zamiast zwracać false, aby mogło ono zostać poprawnie propagowane do innych programów obsługi.

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

Zezwalaj na klawisz enter na przyciskach textareas i submit only

Jeśli chcesz również włączyć klawisz enter na przyciskach submit <input|button type="submit">, zawsze możesz Dopracować selektor jako poniżej.

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

Zauważ, że input[type=text] jak sugerowano w niektórych innych odpowiedziach nie obejmuje tych wejść HTML5 nietekstowych, więc to nie jest dobry selektor.

Musiałem złapać wszystkie trzy zdarzenia związane z naciśnięciem klawiszy, aby uniemożliwić złożenie formularza:

    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);

Możesz połączyć wszystkie powyższe w ładną, kompaktową wersję:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

Jeśli użyjesz skryptu do wykonania rzeczywistego przesłania, możesz dodać linię "return false" do obsługi onsubmit w następujący sposób:

<form onsubmit="return false;">

Wywołanie submit () w formularzu z JavaScript nie spowoduje wywołania zdarzenia.

Użycie:

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

To rozwiązanie działa na wszystkich formularzach na stronie internetowej (również na formularzach wstawionych za pomocą Ajax), uniemożliwiając tylkowprowadzanie s w tekstach wejściowych. Umieść go w funkcji gotowego dokumentu i zapomnij o tym problemie na całe życie.

Zamiast uniemożliwiać użytkownikom naciśnięcie Enter, co może wydawać się nienaturalne, możesz zostawić formularz w takim stanie, w jakim jest i dodać dodatkową walidację po stronie klienta: gdy ankieta nie jest zakończona, wynik nie jest wysyłany na serwer, a użytkownik otrzymuje ładny komunikat informujący, co należy zakończyć, aby wypełnić formularz. Jeśli używasz jQuery, spróbuj wtyczki walidacji:

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

To będzie wymagało więcej pracy niż złapanie Wprowadź przycisk, ale z pewnością zapewni to bogatsze wrażenia użytkownika.

A nice simple little jQuery solution:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Nie mogę jeszcze skomentować, więc wrzucę nową odpowiedź

Akceptowana odpowiedź jest ok-owska, ale nie zatrzymywała się submit na numpad enter. Przynajmniej w obecnej wersji Chrome. Musiałem zmienić stan kodu kluczowego na ten, a potem działa.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Moim rozwiązaniem jest osiągnięcie celu, jest czysty i skuteczny.

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

Zupełnie inne podejście:

1. pierwszy <button type="submit"> w formularzu zostanie aktywowany po naciśnięciu Enter.
2. to prawda, nawet jeśli przycisk jest ukryty przez style="display:none;
3. skrypt dla tego przycisku może zwrócić false, co przerywa proces przesyłania.
4. możesz mieć jeszcze jedną <button type=submit> do przesłania formularza. Po prostu wróć true, aby kaskadowo złożyć zgłoszenie.
5. naciśnięcie Enter podczas gdy prawdziwy submit przycisk jest ustawiony, aktywuje rzeczywisty przycisk submit.
6. naciśnięcie Enter wewnątrz <textarea> lub inne kontrolki formularza zachowają się normalnie.
7. naciśnięcie Enter wewnątrz formantu <input> spowoduje uruchomienie pierwszego <button type=submit>, który zwraca false, a zatem nic się nie dzieje.

Tak więc:

<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>

Podanie formy akcji 'javascript:void(0);' wydaje się działać

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

Sekcja 4.10.22.2 dorozumiane przesyłanie specyfikacji W3C HTML5 mówi:

A form element 's default button jest pierwszym submit button w Tree order którego właściciel formularza jest taki, że form element.

Jeśli agent użytkownika pozwala użytkownikowi przesłać formularz w sposób niejawny( na przykład na niektórych platformach naciśnięcie klawisza "enter" podczas gdy pole tekstowe jest skupione w sposób niejawny przesyła Formularz), to robi to dla forma, której domyślny przycisk ma zdefiniowane zachowanie aktywacji, musi spowodować, że agent użytkownika uruchomi syntetyczne kroki aktywacji kliknięćna tym domyślnym przycisku.

Uwaga: W związku z tym, jeśli domyślny przycisk jest wyłączony, formularz nie jest przesyłany, gdy używany jest taki mechanizm składania niejawnego. (Przycisk nie ma zachowania aktywacji Po wyłączeniu.)

Dlatego, a zgodnie ze standardami, aby wyłączyć wszelkie ukryte przesyłanie formularza, należy umieścić wyłączony przycisk submit jako pierwszy przycisk submit w formularzu:

<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>

Jedną z miłych cech tego podejścia jest to, że działa bez JavaScript ; niezależnie od tego, czy JavaScript jest włączony, wymagana jest przeglądarka zgodna ze standardami, aby zapobiec niejawnemu przesyłaniu formularzy.

Musiałem uniemożliwić przesyłanie tylko określonych danych wejściowych, więc użyłem selektora klas, aby była to funkcja "globalna" wszędzie tam, gdzie jej potrzebuję.

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

I ten kod jQuery:

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

Alternatywnie, jeśli keydown jest niewystarczające:

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

Niektóre uwagi:

Modyfikując różne dobre odpowiedzi tutaj, klucz Enter wydaje się działać dla keydown we wszystkich przeglądarkach. Dla alternatywy zaktualizowałem bind() do metody on().

Jestem wielkim fanem klasy selektory, ważenie wszystkich plusów i minusów oraz dyskusje o wydajności. Moja konwencja nazewnictwa to "idSomething", aby wskazać, że jQuery używa go jako id, aby oddzielić go od stylizacji CSS.

1. nie używaj type = "submit" dla wejść lub przycisków.
2. Użyj type = "button" i użyj js [Jquery / angular / etc], aby przesłać formularz na serwer.

Możesz utworzyć metodę JavaScript, aby sprawdzić, czy klawisz Enter został trafiony, a jeśli tak, aby zatrzymać submit.

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

Po prostu wywołaj to w metodzie submit.

Nie umieszczenie przycisku submit może wystarczyć. Wystarczy umieścić skrypt do wejścia (Typ=przycisk) lub dodać eventListener, jeśli chcesz, aby przesłać dane w formularzu.

Raczej użyj tego

<input type="button">

Than using this

<input type="submit">

Miałem podobny problem, gdzie miałem siatkę z "AJAX textfields" (Yii CGridView) i tylko jeden przycisk submit. Za każdym razem szukałem w polu tekstowym i kliknąłem enter w przesłany formularz. Musiałem coś zrobić z przyciskiem, ponieważ był to jedyny wspólny przycisk między widokami (wzorzec MVC). Wszystko co musiałem zrobić to usunąć type="submit" i umieścić onclick="document.forms[0].submit()

Myślę, że jest dobrze pokryty wszystkimi odpowiedziami, ale jeśli używasz przycisku z kodem weryfikacyjnym JavaScript, możesz po prostu ustawić onkeypress formularza Dla Enter, aby wywołać zgłoszenie zgodnie z oczekiwaniami:

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

W moim konkretnym przypadku musiałem zatrzymać ENTER przed wysłaniem formularza, a także symulować kliknięcie przycisku Wyślij. Dzieje się tak dlatego, że przycisk submit miał na sobie obsługę kliknięć, ponieważ byliśmy w oknie modalnym (odziedziczony stary kod). W każdym razie oto moje rozwiązania dla tej sprawy.

    $('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;
        }
    });

Ten przypadek użycia jest szczególnie przydatny dla osób pracujących z IE8.

To działa dla mnie

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

Coś, czego nie widziałem tutaj odpowiedział: kiedy zakładka przez elementy na stronie, naciśnięcie Enter Po dotarciu do przycisku submit uruchomi onsubmit obsługi w formularzu, ale będzie to nagrywać zdarzenie jako MouseEvent. Oto moje krótkie rozwiązanie, aby pokryć większość baz:

to nie jest odpowiedź związana z 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();
}

Aby znaleźć działający przykład: https://jsfiddle.net/nemesarial/6rhogva2/

Chciałbym dodać mały kod CoffeeScript (nie testowany w terenie):

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

(mam nadzieję, że podoba Ci się ta fajna sztuczka w klauzuli "chyba".)

Istnieje wiele dobrych odpowiedzi tutaj już, po prostu chcę wnieść coś z perspektywy UX. Sterowanie klawiaturą w formularzach jest bardzo Ważne.

Pytanie brzmi, jak wyłączyć z składania na klawiaturze Enter. Nie jak ignorować Enter w całej aplikacji. Rozważ więc dołączenie obsługi do elementu formularza, a nie do okna.

Wyłączenie Enter do przesłania formularza powinno nadal pozwalać na:

1. składanie formularza przez Enter gdy składasz przycisk jest skupiony.
2. przesyłanie formularza, gdy wszystkie pola są wypełnione.
3. interakcja z przyciskami nie-submit poprzez Enter.

$('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;
  }
});

Tylko blokuj SUBMIT, ale nie Inne, ważne funkcje klawisza enter, takie jak tworzenie nowego akapitu w <textarea>:

window.addEventListener('keydown', function(e){
    //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) {
            e.preventDefault();
            return false;
        }
    })
}

To działa dla mnie we wszystkich przeglądarkach po wielu frustracji innymi rozwiązaniami. Zewnętrzna funkcja name_space jest po prostu trzymać się z dala od deklarowania globali, co też polecam.

$(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;    
        }
    }
}

Użycie próbki:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

W moim przypadku miałem kilka jQuery UI pól Autouzupełniania i pól tekstowych w formularzu, więc zdecydowanie chciałem, aby zaakceptowałyEnter . Usunąłem więc wejście type="submit" z formularza i dodałem anchor <a href="" id="btn">Ok</a>. Następnie wystylizowałem go jako przycisk i dodałem następujący kod:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

Jeśli użytkownik wypełni wszystkie wymagane pola, validateData() powiedzie się i formularz zostanie wysłany.

Użycie:

// 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>