Zapobiegaj przesyłaniu formularza przez użytkowników, naciskając Enter

Mam ankietę na stronie internetowej i wydaje się, że są pewne problemy z tym, że użytkownicy klikają Enter (nie wiem dlaczego) i przypadkowo przesyłają ankietę (formularz) bez klikania przycisku Prześlij. Czy istnieje sposób, aby temu zapobiec?

Używam HTML, PHP 5.2.9 i jQuery w ankiecie.

Możesz użyć metody takiej jak

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

Czytając komentarze do oryginalnego postu, możesz uczynić go bardziej użytecznym i pozwolić użytkownikom na naciśnięcie, Enterjeśli wypełnią wszystkie pola:

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

Nie zezwalaj na wprowadzanie klucza w dowolnym miejscu

Jeśli nie masz <textarea>formularza w formularzu, dodaj następujące elementy do <form>:

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

Lub z jQuery:

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

Spowoduje to, że każde naciśnięcie klawisza w formularzu będzie sprawdzane w key. Jeśli nie Enter, to wróci truei wszystko będzie kontynuowane jak zwykle. Jeśli tak Enter, to wróci falsei wszystko natychmiast się zatrzyma, więc formularz nie zostanie przesłany.

keydownWydarzenie jest korzystniejszy keyup, ponieważ keyupjest zbyt późno, aby złożyć formie bloku. Historycznie istniało równieżkeypress , ale to jest przestarzałe, podobnie jak KeyboardEvent.keyCode. Zamiast tego należy użyć, KeyboardEvent.keyktóry zwraca nazwę naciskanego klawisza. Gdy Enterjest zaznaczone, to sprawdza 13 (normalne wejście), a także 108 (numpad enter).

Zauważ, że $(window) jak sugerują niektóre inne odpowiedzi zamiast $(document)nie działa dla keydown/ keyupw IE <= 8, więc nie jest to dobry wybór, jeśli chcesz objąć również tych biednych użytkowników.

Zezwalaj na klawisz Enter tylko w obszarach tekstowych

Jeśli masz <textarea>w swoim formularzu (co oczywiście powinno zaakceptować klawisz Enter), dodaj moduł obsługi klawiszy do każdego elementu wejściowego, który nie jest <textarea>.

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

Aby zmniejszyć płytkę kotłową, lepiej to zrobić za pomocą jQuery:

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

Jeśli masz inne funkcje obsługi zdarzeń dołączone do tych elementów wejściowych, które z jakiegoś powodu chciałbyś również wywołać po naciśnięciu klawisza enter, to tylko zapobiegaj domyślnemu zachowaniu zdarzenia zamiast zwracania wartości false, aby mógł on poprawnie propagować do innych programów obsługi.

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

Zezwalaj na klawisz Enter tylko w obszarach tekstowych i wysyłaj tylko przyciski

Jeśli chcesz zezwolić na klawisz Enter na przyciskach przesyłania <input|button type="submit"> , zawsze możesz zawęzić selektor jak poniżej.

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

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

Sekcja 4.10.22.2 Domniemane przesłanie specyfikacji W3C HTML5 mówi:

A formelementu przycisk domyślny jest pierwszym złożyć przycisk w kolejności drzewa , którego właściciel forma jest formelementem.

Jeśli agent użytkownika obsługuje niejawne przesyłanie formularza przez użytkownika (na przykład na niektórych platformach naciśnięcie klawisza „enter”, gdy pole tekstowe jest niejawnie przesłane, to formularz), to w przypadku formularza, którego domyślny przycisk ma zdefiniowaną aktywację zachowanie musi spowodować, że agent użytkownika uruchomi kroki aktywacji kliknięcia syntetycznego 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 domyślny mechanizm przesyłania. (Przycisk ma zachowanie aktywacyjny gdy wyłączony).

Dlatego zgodnym ze standardami sposobem wyłączania niejawnego przesyłania formularza jest umieszczenie wyłączonego przycisku przesyłania jako pierwszego przycisku przesyłania 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 fajnych cech tego podejścia jest to, że działa bez JavaScript ; bez względu na to, czy włączony jest JavaScript, wymagana jest przeglądarka internetowa zgodna ze standardami, aby zapobiec niejawnemu przesyłaniu formularzy.

Musiałem złapać wszystkie trzy zdarzenia związane z naciskaniem klawiszy, aby uniemożliwić przesłanie 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żywasz skryptu do faktycznego przesłania, możesz dodać wiersz „return false” do procedury obsługi onsubmit w następujący sposób:

<form onsubmit="return false;">

Wywołanie submenu () w formularzu z JavaScript nie spowoduje zdarzenia.

Posługiwać się:

$(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 (także na formularzach wstawionych z Ajax), zapobiegając tylko Enters w tekstach wejściowych. Umieść go w funkcji gotowości do dokumentu i zapomnij o tym problemie na całe życie.

Zamiast uniemożliwiać użytkownikom naciskanie Enter , co może wydawać się nienaturalne, możesz opuścić formularz bez i dodać dodatkową weryfikację po stronie klienta: po zakończeniu ankiety wynik nie jest wysyłany do serwera, a użytkownik otrzymuje przyjemną wiadomość co należy wypełnić, aby wypełnić formularz. Jeśli używasz jQuery, wypróbuj wtyczkę Validation:

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

Będzie to wymagało więcej pracy niż złapanie Enterprzycisku, ale z pewnością zapewni bogatsze wrażenia użytkownika.

Ładne proste małe rozwiązanie jQuery:

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

Nie mogę jeszcze komentować, więc opublikuję nową odpowiedź

Zaakceptowana odpowiedź jest w porządku, ale nie przestała przesyłać po wpisaniu numpada. Przynajmniej w aktualnej wersji Chrome. Musiałem zmienić warunek kodu klucza na to, a potem działa.

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

To moje rozwiązanie, by osiągnąć cel, jest czyste i skuteczne.

$('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. Dzieje się tak, nawet jeśli przycisk jest ukryty style="display:none;
3. Skrypt dla tego przycisku może zostać zwrócony false , co przerywa proces przesyłania.
4. Nadal możesz mieć inny <button type=submit>do przesłania formularza. Po prostu wróćtrue aby przesłać kaskadowo zgłoszenie.
5. Groźny Enter gdy aktywny jest prawdziwy przycisk przesyłania, aktywuje prawdziwy przycisk przesyłania.
6. Naciskanie w Enterśrodku<textarea> lub innej kontrolki formularza będzie działać normalnie.
7. Naciśnięcie Enterwewnątrz <input>formantów spowoduje uruchomienie pierwszego <button type=submit>, który powraca false, a zatem nic się nie dzieje.

A zatem:

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

Nadanie formie akcji „javascript: void (0);” wydaje się załatwić sprawę

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

Nie można wprowadzić przycisku przesyłania. Wystarczy umieścić skrypt na wejściu (typ = przycisk) lub dodać eventListener, jeśli chcesz, aby przesłał dane w formularzu.

Raczej użyj tego

<input type="button">

niż przy użyciu tego

<input type="submit">

1. Nie należy używać typu = „prześlij” dla danych wejściowych lub przycisków.
2. Użyj type = "button" i użyj js [Jquery / angular / etc], aby przesłać formularz na serwer.

Musiałem uniemożliwić przesyłanie tylko określonych danych wejściowych, więc użyłem selektora klasy, aby ta funkcja była „globalna” 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 nie jest wystarczający:

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

Niektóre uwagi:

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

Jestem wielkim fanem selektorów klas, ważąc wszystkie zalety i wady oraz dyskusje dotyczące wydajności. Moja konwencja nazewnictwa to „idSomething”, co oznacza, że ​​jQuery używa go jako identyfikatora, aby oddzielić go od stylizacji CSS.

Możesz wykonać metodę JavaScript, aby sprawdzić, czy Enterklucz został wciśnięty, a jeśli tak, aby zatrzymać przesyłanie.

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

Po prostu wywołaj to w metodzie przesyłania.

WYŁĄCZ TYLKO BLOKOWANIE, ale nie inne ważne funkcje klawisza Enter, takie jak tworzenie nowego akapitu w <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>

To idealny sposób, aby nie zostać przekierowanym ze strony

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

Miałem podobny problem, w którym miałem siatkę z „ajaxami pól tekstowych” (Yii CGridView) i tylko jednym przyciskiem wysyłania. Za każdym razem, gdy wyszukiwałem pole tekstowe i naciskałem, wprowadź przesłany formularz. Musiałem coś zrobić z przyciskiem, ponieważ był to jedyny wspólny przycisk między widokami (wzór MVC). Wszystko, co musiałem zrobić, to usunąć type="submit"i włożyćonclick="document.forms[0].submit()

Myślę, że jest dobrze uwzględniony we wszystkich odpowiedziach, ale jeśli używasz przycisku z kodem weryfikacyjnym JavaScript, możesz po prostu ustawić klawisz onkeypress formularza, aby Enter mógł wywołać zgłoszenie zgodnie z oczekiwaniami:

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

JS onkeypress może być tym, co musisz zrobić. Nie ma potrzeby większych, globalnych zmian. Jest to szczególnie ważne, jeśli nie jesteś tym, który koduje aplikację od zera, i zostałeś doprowadzony do naprawy czyjejś strony internetowej bez rozrywania jej na części i ponownego testowania.

Jest już wiele dobrych odpowiedzi, chcę po prostu coś wnieść z perspektywy UX. Elementy sterujące klawiatury w formularzach są bardzo ważne.

Pytanie brzmi, jak wyłączyć przesyłanie po naciśnięciu klawisza Enter. Nie jak ignorować Enterw całej aplikacji. Rozważ więc dołączenie modułu obsługi do elementu formularza, a nie do okna.

Wyłączenie Enterprzesyłania formularza powinno nadal umożliwiać:

1. Przesyłanie formularza za pośrednictwem, Entergdy przycisk Prześlij jest aktywny.
2. Przesyłanie formularza po wypełnieniu wszystkich pól.
3. Interakcja z przyciskami nieprzesyłającymi za pośrednictwem Enter.

To tylko płyta kotłowa, ale spełnia wszystkie trzy warunki.

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

Na coś, czego nie widziałem tutaj, odpowiedziałem: kiedy przechodzisz między elementami na stronie, naciśnięcie przycisku, Entergdy dotrzesz do przycisku wysyłania, uruchomi moduł obsługi onsubmit w formularzu, ale zarejestruje zdarzenie jako MouseEvent. Oto moje krótkie rozwiązanie obejmujące 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/

W moim konkretnym przypadku musiałem powstrzymać ENTER przed przesłaniem formularza, a także zasymulować kliknięcie przycisku przesłania. Wynika to z faktu, że przycisk Prześlij zawierał moduł obsługi kliknięć, ponieważ byliśmy w oknie modalnym (odziedziczony stary kod). W każdym razie oto moje rozwiązania kombinacyjne dla tego przypadku.

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

Chciałbym dodać trochę kodu 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ę niezła sztuczka z klauzuli chyba).

Za pomocą Javascript (bez sprawdzania pola wprowadzania):

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

Jeśli ktoś chce zastosować to w określonych polach, na przykład wpisz tekst:

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

To działa dobrze w moim przypadku.

Wejdź do swojego css i dodaj to do niego, a następnie automatycznie zablokuje przesyłanie formularza, o ile podasz dane, jeśli nie chcesz, możesz je usunąć lub wpisać, activatea deactivatezamiast tego

 input:disabled {
        background: gainsboro;
      }
      input[value]:disabled {
        color: whitesmoke;
      }

Możesz także użyć, javascript:void(0)aby zapobiec przesłaniu formularza.

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

Działa to dla mnie we wszystkich przeglądarkach po wielu frustracjach z innymi rozwiązaniami. Zewnętrzną funkcją name_space jest po prostu unikanie deklarowania globałów, co również 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;    
        }
    }
}

Przykładowe użycie:

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

Posługiwać się:

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