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

773

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.

DForck42
źródło
2
Nie używaj tagów formularzy i nie rób niestandardowych żądań ajax :) Ale pewnie, możesz przejść dalej dzięki podejściu polegającemu na słuchaniu kluczy i zapobieganiu, to właśnie zrobiłbym ...
jancha
Po prostu nie używam tagów formularzy, ponieważ wolę przetwarzać formularze za pomocą zapytań ajax w niekonwencjonalny sposób (tj. Przesyłanie niektórych pól, gdy ich fokus jest opuszczany itp.). Możesz także utworzyć specjalnego detektora, aby przechwycić klawisz Enter i przetworzyć go tylko wtedy, gdy chcesz to zrobić.
Juan

Odpowiedzi:

881

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;
    }
  });
});
Peter Mortensen
źródło
7
Obecnie szukam tylko szybkiej poprawki i nie mam czasu na wdrożenie elementów sprawdzania poprawności. Doceniam odpowiedzi wszystkich, ale tym razem zamierzam się tym zająć. Dziękuję Ci.
DForck42
8
Ta metoda jest unikatowa, ponieważ uniemożliwia użytkownikowi przesłanie formularza przez naciśnięcie klawisza Enter i skupienie się na przycisku przesłania. Najlepszym rozwiązaniem byłoby rozwiązanie BalusC poniżej, w którym enter jest przerywany tylko przy jednoczesnym skupieniu się na danych wejściowych formularza.
Anson Kao
3
Widziałem sytuacje (tylko Internet Explorer), gdzie trzeba wiązać się keydownna documentzamiast windowtego do pracy.
MartinHN
8
Możesz dodać && !$(document.activeElement).is('textarea')do warunku, w przeciwnym razie znaki nowej linii w obszarze tekstowym zostaną zablokowane (przynajmniej w IE).
Flash
1
To działa dla mnie. Ale to również zapobiega dodawaniu linii przerwania w obszarze tekstowym.
César León
613

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.

BalusC
źródło
11
To powinna być dobra odpowiedź, ponieważ dotyczy również formy, w tym textarea i lepiej wyjaśnia propagację zdarzeń
foobar
6
":input:not(textarea):not([type=submit]):not(button)"jeśli używasz <button>zamiast<input type=submit>
Simon_Weaver 24.09.16
Zapobiega to działaniu klawisza Enter na danych wejściowych innych niż textarea. To nie jest dobre rozwiązanie
mate.gwozdz
Czy wcześniej miał być dwukropek input?
xfactorial
1
@YodaDaCoda: uzgodnione i dostosowane.
BalusC
110

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.

Daniel Trebbien
źródło
6
Errrr ... To jest solidne złoto. Jeśli to naprawdę działa w różnych przeglądarkach, zasługuje na przejście na górę! W jaki sposób tak wiele osób odpowiedziało na różne naciśnięcia klawiszy, skróty klawiszowe itp., Ale nie otrzymało odpowiedzi opartej na standardach?
John Rees,
4
Z jednej strony jest to proste i zapobiega wszystkim pułapkom sugerowanym przez przyjęte odpowiedzi. Z drugiej strony wydaje się, że to niewielkie wykorzystanie standardu. Wyrazy uznania za dodanie atrybutu aria- *. Chciałbym usłyszeć więcej opinii na ten temat.
Solvitieg
2
Działa również jako <input type="submit" disabled style="display: none" aria-hidden="true" />i możesz zmniejszyć rozmiar swojej strony o kilka znaków. :-P
gaefan
7
IE 11 mimo to przesyła.
CamaroSS
2
Safari to nowy IE.
twistedpixel
68

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(); }
    });
Upgradingdave
źródło
7
Możesz albo połączyć 3 ostatnie selektory, albo powiązać wiele zdarzeń jedną taką metodą $("#search").bind('keypress keyup keydown',preventSubmit);
Moak,
Ponieważ w formie internetowej ASP.NET wszystko musi być zagnieżdżone w <form>tagu, enter key będzie przesłać formularz ... To rozwiązanie wyłączona enter i rozwiązaniu problemu, jednak dzięki @Dave! Następnie włączyłem klawisz Enter dla niektórych pól id.
Ian Campbell,
@Upgradingdave Jak możesz napisać „log ()” zamiast „console.log ()”?
radbyx,
1
@radbyx ... dobry połów, powinien być console.log, zaktualizowałem swoją odpowiedź.
Upgradingdave
Zauważ, że wraz z keypress keyup keydowntobą dwukrotnie wywołujesz dowolny kod w warunku if .
Kai Noack
56

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.

Tom Hubbard
źródło
Działa dla mnie w Chrome, spowoduje to również wyłączenie przycisków przesyłania, co jest w porządku, jeśli chcesz wywołać zdarzenie onlick na samym przycisku przesyłania. Wskazówka Ajax: dodaj wywołanie funkcji przed powrotem, a użytkownik będzie mógł wcisnąć klawisz Enter bez przesyłania formularza na stronę.
Dennis Heiden,
Pracował dla mnie w Chrome, IE-11 i Firefox i był najprostszym rozwiązaniem do wdrożenia. Wyłączenie klawisza Enter w całych sekcjach strony, podobnie jak niektóre odpowiedzi, wydaje się zbyt ekstremalne i podatne na błędy.
Roberto
Dziękuję Ci. zadziałało dla mnie.
LU
23

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.

Buzogany Laszlo
źródło
Myślę, że oryginalna odpowiedź e.whichbyła w porządku; nie trzeba go zmieniać na e.keyCode. Oba zwracają wartość 13 dla klawisza Enter. Zobacz stackoverflow.com/a/4471635/292060 i stackoverflow.com/a/18184976/292060
goodeye,
2
To rozwiązanie zajmuje się dwoma rozwiązaniami: 1.) Nie przesyłaj formularzy przy wprowadzaniu 2.) Umożliwia wprowadzanie w
obszarach tekstowych
21

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.

bbmud
źródło
13
Brzmi dobrze, ale pola opcjonalne są problematyczne, użytkownik może przez pomyłkę nacisnąć Enter, a formularz zostanie przesłany. Nie wiem, skąd dowiesz się, kiedy ankieta nie zostanie zakończona, chyba że podasz wszystkie pola zgodnie z wymaganiami (brak domyślnych wyborów, puste pola niedozwolone ...)
Christophe Roussy
19

Ładne proste małe rozwiązanie jQuery:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});
Eonasdan
źródło
1
+1 Szukałem alternatywy jQuery, zamiast zwykłego JS typuvar key = event.keyCode || event.which; if (key == 13) return false;
RaphaelDDL,
1
technicznie jest to nadal POJ z prostszym opakowaniem jquery. podany kod jest prawie taki sam.
Eonasdan,
19

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) {...}
sparklos
źródło
5
Różnica między Enter a Return - wielu operatorów punktów sprzedaży używa wyłącznie klawiatury numerycznej. +1
helloserve
8
Teraz (05-21-2015) , zarówno dla normalnego wprowadzania, jak i wprowadzania na klawiaturze numerycznej, keyCode to 13 [Chrome 42, IE 11, FIreFox 36]
Cliff Burton
15

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;
});
Deweloper
źródło
13

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>
Erics
źródło
1
Hmm, w Chrome i Firefox, jeszcze krótszą wersją byłoby <przycisk wyłączony styl = "display: none;"> <przycisk>, który ma tę zaletę, że nie wymaga JS do działania. Safari po prostu ignoruje przycisk, więc inne rzeczy będą się normalnie dziać.
Erics
1
Naprawdę nie podobał mi się sposób „ignorowania kodu 13”, więc zacząłem myśleć w jakiś łatwy i trudny sposób, a ten pomysł przyszedł mi do głowy i gdy przewijałem tę stronę, zobaczyłem ten wątek :). Plus jeden za wspólny pomysł i oczywiście najlepsze rozwiązanie.
Jalali Shakib,
Idealna odpowiedź dla mnie. Chciałem, aby formularz emulował interfejs wiersza polecenia, aby użytkownik naciskał klawisz Enter dla każdego następnego pola, a następnie przesyłał go na końcu.
nathan
och genialne, ostatni przycisk może być taki, aby zapobiec duplikowaniu przesyłać na szybkie kliknięcia:<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
Arash Moosapour
@ArashMoosapour, proszę nie wyłączać przycisków przesyłania, jeśli są aktywne - spowoduje to zmniejszenie ostrości i jest bałaganem dla dostępności.
Erics
9

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>
sidarcy
źródło
8

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">
Jimwel Anobong
źródło
8
  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.
Irfan Ashraf
źródło
7

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.

dobre oko
źródło
Działa to na elementy pola tekstowego w formularzu. Podczas pisania i naciskania klawisza Enter w polu tekstowym domyślne zachowanie przesyła formularz. Przechwytuje to klawisz Enter i uniemożliwia jego przesłanie.
goodeye
5

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.

Brandon
źródło
4

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>

mate.gwozdz
źródło
zastanawiam się, kto i dlaczego miałby głosować za tym: | jaki jest problem z moim rozwiązaniem?
mate.gwozdz
Oceniony za wkład. Przyjęta odpowiedź łamie większość interfejsu użytkownika, uniemożliwiając zarejestrowanie „enter” w całej aplikacji. Niedobrze. Myślę, że dobrym pomysłem jest zezwolenie na obsługę enterów w elementach formularza, zwłaszcza przyciskach, więc podoba mi się ścieżka, którą idziesz. Myślę jednak, że można to osiągnąć bez limitu czasu. Na przykład spójrz na atrybut elementu w module obsługi zdarzeń. Zezwalaj na „przycisk” i „prześlij”
Solvitieg
@NathanCH - ten kod działa dokładnie odwrotnie niż to, co mówisz. To tylko zapobiega wejść od składania formularza i nie przeszkadza żadnej innej funkcji - na przykład, może masz pole tekstowe i chcą korzystać z wejść do tworzenia nowych akapitów.
mate.gwozdz
1
W pierwszym wierszu jest literówka. Zamiast function(e)tego powinno być function(event). W przeciwnym razie to działa dla mnie. Dziękuję Ci.
Guillermo Prandi
1
Jest to absolutny ratownik, ponieważ wszystko inne przeszkadza mi w prawidłowej obsłudze wprowadzania zdarzeń zapisywania dla takich elementów jak wbudowane edycje siatki. Jedyną sugestią jest, aby w ogóle nie używać „setTimeout”. Myślę, że to jest problem ludzi z tą odpowiedzią. To jest zbyt wybredne. Zamiast tego w przypadku zdarzenia wykonaj, on("keydown", function(event) { enterPressed = true; }a następnie w zdarzeniu przesłania, z. on("submit", function(e) { if (pressedEnter == true) { pressedEnter = false; e.preventDefault(); return false;}Zapewni to, że zadziała ono bez względu na opóźnienie.
Curtis Snowden
3

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

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});
Rifkan Razak
źródło
2

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

StackUnder
źródło
2

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.

czosnek
źródło
Zdaję sobie sprawę, że jest to wariant odpowiedzi Toma Hubbarda, którą dałem +1, ponieważ tak naprawdę zrobiłem to dzisiaj, zanim szukałem SO innych pomysłów.
czosnek
2

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

Solvitieg
źródło
1

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/

Nemesarial
źródło
0

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.

Złóg
źródło
0

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(); }
    });
});
Pjl
źródło
0

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

edx
źródło
0

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.

Waqar Alamgir
źródło
0

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;
      }
Lars Gross
źródło
0

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>

Nisharg Shah
źródło
nie działa, gdy masz konkretny method="post"formularz. Na przykład chcę, aby formularz był przesyłany za pomocą przycisków, ale nie po naciśnięciu Enter, gdy fokus jest ustawiony na wejściu.
Souleste
dla tego warunku możesz użyć powyższych odpowiedzi, ponieważ ta odpowiedź opiera się na zapobieganiu przesłaniu formularza przez wprowadzenie i kliknięcie obu. powyższy przykład ma method="post"formę i działa, sprawdź ponownie.
Nisharg Shah,
-2

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!');}
    );
});
crizCraig
źródło
-2

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>
Tapas Pal
źródło