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.
jquery
html
forms
form-submit
DForck42
źródło
źródło
Odpowiedzi:
Możesz użyć metody takiej jak
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:
źródło
keydown
nadocument
zamiastwindow
tego do pracy.&& !$(document.activeElement).is('textarea')
do warunku, w przeciwnym razie znaki nowej linii w obszarze tekstowym zostaną zablokowane (przynajmniej w IE).Nie zezwalaj na wprowadzanie klucza w dowolnym miejscu
Jeśli nie masz
<textarea>
formularza w formularzu, dodaj następujące elementy do<form>
:Lub z jQuery:
Spowoduje to, że każde naciśnięcie klawisza w formularzu będzie sprawdzane w
key
. Jeśli nieEnter
, to wrócitrue
i wszystko będzie kontynuowane jak zwykle. Jeśli takEnter
, to wrócifalse
i wszystko natychmiast się zatrzyma, więc formularz nie zostanie przesłany.keydown
Wydarzenie jest korzystniejszykeyup
, ponieważkeyup
jest zbyt późno, aby złożyć formie bloku. Historycznie istniało równieżkeypress
, ale to jest przestarzałe, podobnie jakKeyboardEvent.keyCode
. Zamiast tego należy użyć,KeyboardEvent.key
który zwraca nazwę naciskanego klawisza. GdyEnter
jest 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 dlakeydown
/keyup
w 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>
.Aby zmniejszyć płytkę kotłową, lepiej to zrobić za pomocą jQuery:
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.
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.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.źródło
":input:not(textarea):not([type=submit]):not(button)"
jeśli używasz<button>
zamiast<input type=submit>
input
?Sekcja 4.10.22.2 Domniemane przesłanie specyfikacji W3C HTML5 mówi:
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:
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.
źródło
<input type="submit" disabled style="display: none" aria-hidden="true" />
i możesz zmniejszyć rozmiar swojej strony o kilka znaków. :-PMusiałem złapać wszystkie trzy zdarzenia związane z naciskaniem klawiszy, aby uniemożliwić przesłanie formularza:
Możesz połączyć wszystkie powyższe w ładną kompaktową wersję:
źródło
$("#search").bind('keypress keyup keydown',preventSubmit)
;<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ólid
.console.log
, zaktualizowałem swoją odpowiedź.keypress keyup keydown
tobą dwukrotnie wywołujesz dowolny kod w warunku if .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:
Wywołanie submenu () w formularzu z JavaScript nie spowoduje zdarzenia.
źródło
Posługiwać się:
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.
źródło
e.which
była w porządku; nie trzeba go zmieniać nae.keyCode
. Oba zwracają wartość 13 dla klawisza Enter. Zobacz stackoverflow.com/a/4471635/292060 i stackoverflow.com/a/18184976/292060Zamiast 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.
źródło
Ładne proste małe rozwiązanie jQuery:
źródło
var key = event.keyCode || event.which; if (key == 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.
źródło
To moje rozwiązanie, by osiągnąć cel, jest czyste i skuteczne.
źródło
Zupełnie inne podejście:
<button type="submit">
w formularzu zostanie aktywowany po naciśnięciu Enter.style="display:none;
false
, co przerywa proces przesyłania.<button type=submit>
do przesłania formularza. Po prostu wróćtrue
aby przesłać kaskadowo zgłoszenie.<textarea>
lub innej kontrolki formularza będzie działać normalnie.<input>
formantów spowoduje uruchomienie pierwszego<button type=submit>
, który powracafalse
, a zatem nic się nie dzieje.A zatem:
źródło
<button onclick="this.disabled=true;this.form.submit();" type="submit"">submit</button>
Nadanie formie akcji „javascript: void (0);” wydaje się załatwić sprawę
źródło
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
niż przy użyciu tego
źródło
źródło
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ę.
I ten kod jQuery:
Alternatywnie, jeśli Keydown nie jest wystarczający:
Niektóre uwagi:
Modyfikując różne dobre odpowiedzi tutaj, Enterklucz wydaje się działać
keydown
we wszystkich przeglądarkach. Dla alternatywy, zaktualizowałembind()
doon()
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.
źródło
Możesz wykonać metodę JavaScript, aby sprawdzić, czy Enterklucz został wciśnięty, a jeśli tak, aby zatrzymać przesyłanie.
Po prostu wywołaj to w metodzie przesyłania.
źródło
WYŁĄCZ TYLKO BLOKOWANIE, ale nie inne ważne funkcje klawisza Enter, takie jak tworzenie nowego akapitu w
<textarea>
:źródło
function(e)
tego powinno byćfunction(event)
. W przeciwnym razie to działa dla mnie. Dziękuję Ci.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.To idealny sposób, aby nie zostać przekierowanym ze strony
źródło
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()
źródło
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:
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.
źródło
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ćEnter
w całej aplikacji. Rozważ więc dołączenie modułu obsługi do elementu formularza, a nie do okna.Wyłączenie
Enter
przesyłania formularza powinno nadal umożliwiać:Enter
gdy przycisk Prześlij jest aktywny.Enter
.To tylko płyta kotłowa, ale spełnia wszystkie trzy warunki.
źródło
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
JavaScript
Aby znaleźć działający przykład: https://jsfiddle.net/nemesarial/6rhogva2/
źródło
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.
Ten przypadek użycia jest szczególnie przydatny dla osób pracujących z IE8.
źródło
To działa dla mnie
źródło
Chciałbym dodać trochę kodu CoffeeScript (nie testowany w terenie):
(Mam nadzieję, że podoba Ci się niezła sztuczka z klauzuli chyba).
źródło
Za pomocą Javascript (bez sprawdzania pola wprowadzania):
Jeśli ktoś chce zastosować to w określonych polach, na przykład wpisz tekst:
To działa dobrze w moim przypadku.
źródło
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ć,
activate
adeactivate
zamiast tegoźródło
Możesz także użyć,
javascript:void(0)
aby zapobiec przesłaniu formularza.źródło
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.method="post"
formę i działa, sprawdź ponownie.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.
Przykładowe użycie:
źródło
Posługiwać się:
źródło