Verhindern, dass Benutzer das senden eines Formulars durch drücken der Enter -
Habe ich eine Umfrage auf einer website, und es scheint einige Probleme mit der Benutzer, drücken der EINGABETASTE (ich weiß nicht, warum) und versehentlich Absenden der Umfrage (Formular), ohne auf die senden-Schaltfläche. Gibt es eine Möglichkeit dies zu verhindern?
Ich bin mit HTML, PHP 5.2.9 und jQuery auf die Umfrage.
Verwenden Sie nicht form-tags und führen Sie benutzerdefinierte ajax-request 🙂 Aber sicher, Sie können weiter gehen mit der Schlüssel-Zuhören und Prävention-Ansatz, das ist, was ich tun würde..
Ich weiß nur nicht, verwenden Sie die form-tags, da ich lieber zur Verarbeitung von Formularen durch ajax-Anfragen von nicht-konventionellen Möglichkeiten (ich.e: die Anmeldung einige Felder im Fokus, werden gelöscht, etc.). Sie können auch eine spezielle listener zu fangen Enter-Taste und verarbeiten Sie nur, wenn Sie wollen, es zu tun.
Ich weiß nur nicht, verwenden Sie die form-tags, da ich lieber zur Verarbeitung von Formularen durch ajax-Anfragen von nicht-konventionellen Möglichkeiten (ich.e: die Anmeldung einige Felder im Fokus, werden gelöscht, etc.). Sie können auch eine spezielle listener zu fangen Enter-Taste und verarbeiten Sie nur, wenn Sie wollen, es zu tun.
InformationsquelleAutor DForck42 | 2009-05-21
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie eine Methode wie
Beim Lesen der Kommentare auf dem ursprünglichen post, um es nutzbar und Leuten erlauben, drücken Sie die Taste Enter, wenn Sie abgeschlossen haben, alle Felder:
$(window) hat bei mir nicht funktioniert. Ich musste $(document).
Diese Methode ist unideal, weil es verhindert, dass der Benutzer Absenden des Formulars durch drücken der Taste enter während konzentriert sich auf die senden-Schaltfläche. Die beste Lösung wäre, dass der BalusC unten, wo ist die Eingabe nur unterbrochen, während noch konzentriert sich auf die Formular-Eingaben.
Ich habe gesehen, Situationen (nur Internet Explorer), wo Sie zu binden, müssen
keydown
auf diedocument
statt derwindow
für diese zu arbeiten.Möchten Sie vielleicht
&& !$(document.activeElement).is('textarea')
zu dem Zustand oder sonst Zeilenumbrüche innerhalb einer textarea blockiert sind (im IE zumindest).InformationsquelleAutor
Verbieten enter-Taste überall
Wenn Sie nicht über eine
<textarea>
im Formular, dann einfach fügen Sie den folgenden, um Ihre<form>
:Oder mit jQuery:
Dies führt dazu, dass jeder Tastendruck im inneren der form wird geprüft, ob die
key
. Wenn es nichtEnter
, dann wird es wiedertrue
und alles wie gewohnt weiter. Wenn esEnter
, dann wird es wiederfalse
und alles wird sofort zu stoppen, so dass sich die form nicht vorgelegt werden.Den
keydown
Veranstaltung ist bevorzugt überkeyup
alskeyup
ist zu spät, um block-form Einreichen. Historisch gab es auch diekeypress
, aber diese ist veraltet, da ist dieKeyboardEvent.keyCode
. Sie verwenden sollten,KeyboardEvent.key
stattdessen liefert den Namen der gedrückten Taste. WennEnter
aktiviert ist, dann dies wäre zu überprüfen 13 (normale Eingabe) sowie 108 (numpad enter).Beachten Sie, dass
$(window)
wie vorgeschlagen in einigen anderen Antworten, anstatt$(document)
funktioniert nicht fürkeydown
/keyup
im IE<=8, so ist das nicht eine gute Wahl, wenn Sie gerne über die Armen-Anwender als auch.Erlauben, enter-Taste auf Texteingabefelder nur
Wenn Sie eine
<textarea>
im Formular (was natürlich sollte akzeptieren Sie die Enter-Taste), dann fügen Sie das keydown-handler für jedes einzelne input-element, das keine<textarea>
.Zu verringern, boilerplate, das ist besser zu tun, mit jQuery:
Wenn du noch andere event-handler-Funktionen angehängt, auf denen input-Elemente, die Sie würde auch gerne aufrufen auf enter-Taste aus irgendeinem Grund, dann nur verhindern, dass event-Standard-Verhalten, anstatt false, so kann es richtig weitergeben an andere Handler.
Erlauben, enter-Taste auf Texteingabefelder und submit-buttons nur
Wenn Sie möchten, um zu erlauben, enter-Taste auf "Absenden" buttons
<input|button type="submit">
zu, dann verfeinern Sie die Auswahl als unten.Beachten Sie, dass
input[type=text]
wie vorgeschlagen in einigen anderen Antworten nicht gerade diejenigen, die HTML5 nicht-text-Eingänge, so dass nicht eine gute Auswahl.":input:not(textarea):not([type=submit]):not(button)"
wenn Sie<button>
statt<input type=submit>
Dies verhindert, dass enter-Taste von der Arbeit an jedem Eingang andere als textarea. Es ist keine gute Lösung
href="https://stackoverflow.com/a/47702569/3049675">stackoverflow.com/a/47702569/3049675
vereinbart und angepasst.
InformationsquelleAutor BalusC
Hatte ich zu fangen alle drei Ereignisse im Zusammenhang mit drücken der Tasten, um zu verhindern, dass das Formular abgesendet wurde:
Kombinieren Sie alle der oben in eine schöne kompakte version:
$("#search").bind('keypress keyup keydown',preventSubmit)
;Weil in einem ASP.NET web-Formular-alles eingebettet in eine
<form>
tag, die enter-Taste wird abschicken... Diese Lösung deaktiviert die enter-Taste und das problem behoben aber, danke @Dave! Dann aktivierte ich die enter-Taste für bestimmte Felder vonid
.Wie sind Sie in der Lage zu schreiben, "log()" statt "Konsole.log()"?
guter Fang, sollte es
console.log
ich aktualisiert meine Antwort.InformationsquelleAutor Upgradingdave
Wenn Sie ein Skript verwenden, um die tatsächliche Einreichen, dann können Sie "return false" - Zeile auf das onsubmit-handler wie diese:
Aufruf von submit() auf die form von JavaScript nicht das Ereignis auszulösen.
Funktioniert bei mir in Chrome, wird diese auch deaktivieren, submit-buttons, das ist in Ordnung, wenn Sie wollen, lösen ein onlick-event auf den submit-button selbst. Ajax Tipp: Fügen Sie Ihre Funktion rufen Sie vor der Rücksendung und der Benutzer kann immer noch die enter-Taste drücken ohne Absenden des Formulars auf der Seite.
Hat bei mir in Chrome, IE 11 und Firefox und war die einfachste Lösung zu implementieren. Deaktivieren Sie die enter-Taste auf ganze Abschnitte der Seite, da einige Antworten zu tun, scheint zu extrem und anfällig für Fehler.
InformationsquelleAutor Tom Hubbard
Abschnitt 4.10.22.2 Implizite Unterwerfung der W3C-HTML5-Spezifikation sagt:
Daher, eine Standard-konforme Art und Weise zu deaktivieren implizite übermittlung des Formulars ist Platz für ein Behinderten-senden-Schaltfläche als der erste submit-button im Formular:
Ein nettes feature von diesem Ansatz ist, dass es funktioniert ohne JavaScript; ob JavaScript aktiviert ist, wird eine Standard-konforme web-browser ist erforderlich, um zu verhindern, dass die implizite form der Unterwerfung.
Auf der einen Seite ist es einfach und verhindert, dass alle Fallstricke vorgeschlagen, durch die akzeptierten Antworten. Auf der anderen Seite, es fühlt sich wie eine leichte Nutzung der standard. Ein dickes Lob für die inklusive aria -* - Attribut. Ich würde lieben zu hören mehr feedback.
Funktioniert auch als
<input type="submit" disabled style="display: none" aria-hidden="true" />
und reduzieren Sie die Größe Ihrer Seite, indem Sie ein paar chars. 😛IE 11 legt sowieso.
aria-hidden
ist hier überflüssig;display: none
(undhidden
) blendet das element für alle Benutzer. developer.paciellogroup.com/blog/2012/05/...InformationsquelleAutor Daniel Trebbien
Verwenden:
Diese Lösung funktioniert auf allen Formularen auf einer Webseite (auch auf Formen eingefügt mit Ajax), Verhütung nur mit Enters im input-Texte. Legen Sie es in ein document-ready-Funktion, und vergessen Sie dieses problem für ein Leben.
e.which
war in Ordnung; keine Notwendigkeit, es zu änderne.keyCode
. Beide liefern den Wert 13 für die enter-Taste. Siehe stackoverflow.com/a/4471635/292060 und stackoverflow.com/a/18184976/292060Diese Lösung übernimmt zwei Lösungen : 1.) Nicht das senden von Formularen auf 2 eingeben.) Können geben Sie in die Texteingabefelder
InformationsquelleAutor Buzogany Laszlo
Statt zu verhindern, dass Benutzer die Taste Enter, die scheinen unnatürlich ist, lassen Sie die form und fügen Sie einige zusätzliche client-seitige Validierung: Wenn die Umfrage nicht beendet, das Ergebnis wird nicht an den server gesendet und der Benutzer erhält eine nette Nachricht, die mitteilt, was muss fertig sein, um das Formular auszufüllen. Wenn Sie mit jQuery sind, versuchen die Validierung plugin:
http://docs.jquery.com/Plugins/Validation
Dies erfordert mehr Arbeit, als den Fang der Enter - Taste, aber sicherlich wird es bieten eine reichhaltigere user experience.
InformationsquelleAutor bbmud
Kann ich nicht kommentieren noch, also poste ich eine neue Antwort
Akzeptierte Antwort ist ok-ish, aber es war nicht zu stoppen, reichen auf numpad enter. Zumindest in der aktuellen version von Chrome. Ich hatte zu ändern, keycode-Bedingung zu, dann funktioniert es.
Jetzt (05-21-2015), für den normalen enter und numpad enter keyCode 13 [Chrome 42, IE 11, FIreFox 36]
InformationsquelleAutor sparklos
Einem netten kleinen einfachen jQuery-Lösung:
var key = event.keyCode || event.which; if (key == 13) return false;
technisch ist dies noch POJ nur ein einfaches jquery-wrapper. der code, den du angegeben hast, ist fast das gleiche.
InformationsquelleAutor Eonasdan
Es ist meine Lösung um das Ziel zu erreichen,
es ist sauber und effektiv.
InformationsquelleAutor Developer
Einen ganz anderen Ansatz:
<button type="submit">
in der form aktiviert, auf die Taste Enter.style="display:none;
false
, der bricht die Einreichung.<button type=submit>
abschicken des Formulars. Gerade zurücktrue
Kaskade der Vorlage.<textarea>
oder andere Formular-Steuerelemente Verhalten sich wie normale.<input>
Formular-Steuerelemente löst die erste<button type=submit>
gibtfalse
, und somit nichts passiert.Also:
Ich weiß wirklich nicht gefallen das "ignorieren von 13 keycode" Weg, also fing ich an zu denken, für einige einfache und schwierige Art und Weise, und diese Idee kam mir in den Sinn und als ich nach unten scrollen, diese Seite, die ich sah diesen thread :). Plus eins für die gegenseitige Vorstellung und natürlich die beste Lösung.
Die perfekte Antwort für mich. Ich wollte eine form zu emulieren eine CLI, sodass der Benutzer das drücken der EINGABETASTE für jedes nächste Feld und dann auf senden am Ende.
InformationsquelleAutor Erics
Geben der form eine Aktion von 'javascript:void(0);' scheint, den trick zu tun
InformationsquelleAutor sidarcy
Ich brauchte, um zu verhindern, dass nur bestimmte Eingänge von der Vorlage, so habe ich ein class-Selektor zu lassen, das eine "Globale" Funktion, wo ich ihn brauche.
Und das jQuery-code:
Alternativ, wenn keydown ist unzureichend:
Einige Hinweise:
Ändern verschiedene gute Antworten hier, die Enter - Taste scheint zu funktionieren für
keydown
auf allen Browsern. Für die alternative, ich aktualisiertbind()
zu denon()
Methode.Ich bin ein großer fan von class-Selektoren, Wiegen alle der Vorteile und Nachteile-und performance-Diskussionen. Meine Namenskonvention ist 'idSomething", um anzuzeigen jQuery ist die Nutzung als id, trennen Sie es von CSS-styling.
Dies funktioniert auf die textbox-Elemente in das Formular. Wie Sie Typ, und drücken Sie enter in der textbox das Standard-Verhalten sendet das Formular. Dieser fängt die enter-Taste und verhindert, dass es vom Einreichen.
InformationsquelleAutor goodeye
InformationsquelleAutor Irfan Ashraf
Könnten Sie eine JavaScript-Methode zu überprüfen, um zu sehen, ob die Enter - Taste getroffen wurde, und wenn es ist, zu stoppen senden.
Rufen, die auf die submit-Methode.
InformationsquelleAutor Brandon
Nicht darum, einen submit-button machen könnte. Setzen Sie einfach ein Skript aus dem input (type=button) oder add eventListener, wenn Sie es wollen, übermitteln Sie die Daten in das Formular ein.
Eher verwenden diese
als mit dieser
InformationsquelleAutor Jimwel Anobong
Ich hatte ein ähnliches problem, dort hatte ich ein raster mit "ajax-Feldern" (Yii CGridView) und nur einem submit-button. Jedesmal, wenn ich Tat eine Suche auf ein Textfeld und drücken Sie die EINGABETASTE das Formular eingereicht. Ich hatte etwas zu tun mit der-Taste, denn es war die einzige gemeinsame Taste, um zwischen den Ansichten (MVC-pattern). Alle die ich tun musste, war, entfernen Sie
type="submit"
und setzenonclick="document.forms[0].submit()
InformationsquelleAutor StackUnder
Ich denke, es ist gut abgedeckt mit all den Antworten, aber wenn Sie eine Schaltfläche mit dem JavaScript-Validierung code, den Sie konnte einfach legen Sie das Formular onkeypress für Sie die EINGABETASTE, um rufen Sie Ihre submit wie erwartet:
Den onkeypress JS könnte das sein, was Sie tun müssen. Es gibt keine Notwendigkeit für einen größeren, globalen Veränderung. Dies gilt insbesondere, wenn Sie nicht das sind die Kodierung der app von Grund auf neu, und Sie haben gewesen gebracht in die Verlegenheit, jemand anderes web-Seite, ohne ihn zu zerreißen und erneut testen.
InformationsquelleAutor garlicman
In meinem speziellen Fall musste ich anhalten, Sie aus dem Absenden des Formulars und auch simuliert das anklicken der Schaltfläche Absenden. Dies ist, weil der submit-button hatte ein click-handler auf, denn wir waren in einem modalen Fenster (geerbten alten code). In jedem Fall ist hier mein combo-Lösungen für diesen Fall.
Dieser Anwendungsfall ist besonders nützlich für Menschen, die mit IE8.
InformationsquelleAutor Stone
Dies funktioniert für mich
InformationsquelleAutor Pjl
Etwas, was ich nicht gesehen haben, hier beantwortet: wenn Sie mit der Tabulatortaste durch die Elemente auf der Seite, drücken die Taste Enter, wenn man auf den submit-button löst die onsubmit-handler des Formulars, aber es wird die Aufzeichnung der Veranstaltung als ein MouseEvent. Hier ist meine kurze Lösung deckt die meisten Basen:
Dies ist nicht eine jQuery-ähnlichen Antwort
HTML -
JavaScript
Finden Sie ein funktionierendes Beispiel: https://jsfiddle.net/nemesarial/6rhogva2/
InformationsquelleAutor Nemesarial
Ich möchte noch hinzufügen, ein wenig CoffeeScript-code (nicht erprobt):
(Ich hoffe, Sie mögen die schönen trick, in der es sei denn-Klausel.)
InformationsquelleAutor edx
Dies funktionierte bei mir in allen Browsern nach viel Frust mit anderen Lösungen. Die name_space äußere Funktion ist einfach zu bleiben Weg von globals deklarieren, was ich auch empfehlen kann.
Beispiel verwenden:
InformationsquelleAutor crizCraig
In meinem Fall hatte ich ein paar jQuery UI AutoVervollständigen-Felder und Texteingabefelder in einer form, so dass ich auf jeden Fall wollte Sie zu akzeptieren, Enter. So entfernte ich die
type="submit"
Eingabe aus einem Formular Hinzugefügt und ein Anker<a href="" id="btn">Ok</a>
statt. Dann stylte ich es als button und folgenden code Hinzugefügt:Wenn ein Benutzer füllt alle erforderlichen Felder aus
validateData()
gelingt und übermittelt das Formular.InformationsquelleAutor AntonLosev
Verwenden:
InformationsquelleAutor Tapas Pal