Benutzer daran hindern, ein Formular durch Drücken der Eingabetaste abzuschicken

Question

Ich habe eine Umfrage auf einer Website, und es scheint einige Probleme mit den Benutzern zu geben, die die Eingabetaste drücken (ich weiß nicht, warum) und versehentlich die Umfrage (das Formular) abschicken, ohne auf die Schaltfläche "Abschicken" zu klicken. Gibt es eine Möglichkeit, dies zu verhindern?

Ich verwende HTML, PHP 5.2.9 und jQuery für die Umfrage.

Answer 1

Sie können eine Methode wie die folgende verwenden

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

Nach dem Lesen der Kommentare zu dem ursprünglichen Beitrag wurde vorgeschlagen, die Anwendung benutzerfreundlicher zu gestalten und den Benutzern die Möglichkeit zu geben, die Enter wenn sie alle Felder ausgefüllt haben:

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

Answer 2

Eingabetaste nicht überall zulassen

Wenn Sie keine <textarea> in Ihrem Formular, dann fügen Sie einfach Folgendes zu Ihrem <form> :

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

Oder mit jQuery:

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

Dies bewirkt, dass jeder Tastendruck innerhalb des Formulars in der key . Wenn es nicht Enter zurück, dann wird es true und alles geht weiter wie bisher. Wenn es Enter zurück, dann wird es false und alles wird sofort abgebrochen, so dass das Formular nicht abgeschickt wird.

Le site keydown Ereignis wird vorgezogen gegenüber keyup als die keyup zu spät ist, um das Absenden des Formulars zu blockieren. In der Vergangenheit gab es auch die keypress aber dies ist veraltet, ebenso wie die KeyboardEvent.keyCode . Sie sollten verwenden KeyboardEvent.key die den Namen der gedrückten Taste zurückgibt. Wenn Enter angekreuzt ist, würde dies sowohl 13 (normale Eingabe) als auch 108 (Zifferntasten-Eingabe) prüfen.

Beachten Sie, dass $(window) wie in einigen anderen Antworten vorgeschlagen, anstelle von $(document) funktioniert nicht für keydown / keyup in IE<=8, also ist das keine gute Wahl, wenn man auch diese armen Nutzer abdecken möchte.

Eingabetaste nur für Textbereiche zulassen

Wenn Sie eine <textarea> in Ihrem Formular (das natürlich auch debe die Eingabetaste akzeptieren), dann fügen Sie den Keydown-Handler zu jedem einzelnen Eingabeelement hinzu, das nicht ein <textarea> .

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

Um Boilerplate zu reduzieren, ist es besser, dies mit jQuery zu tun:

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

Wenn Sie andere Event-Handler-Funktionen auf diesen Eingabeelementen, die Sie auch auf Enter-Taste aus irgendeinem Grund aufrufen möchten, dann nur verhindern, dass Event-Standard-Verhalten anstelle der Rückgabe von false, so dass es ordnungsgemäß an andere Handler propagieren kann.

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

Eingabetaste nur für Textbereiche und Sendebuttons zulassen

Wenn Sie die Eingabetaste auf Übermittlungsschaltflächen zulassen möchten <input|button type="submit"> dann können Sie den Selektor wie unten beschrieben verfeinern.

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

Beachten Sie, dass input[type=text] wie in einigen anderen Antworten vorgeschlagen, deckt diese HTML5-Nicht-Text-Eingaben nicht ab, also ist das kein guter Selektor.

Answer 3

Abschnitt 4.10.22.2 Implizite Einreichung der W3C-HTML5-Spezifikation steht:

A form Element Standard-Button ist die erste Schaltfläche "Senden en Baumordnung deren Formulareigentümer ist das form Element.

Wenn der Benutzeragent das implizite Absenden eines Formulars durch den Benutzer unterstützt (z. B. wird auf einigen Plattformen durch Drücken der "Enter"-Taste, während ein Textfeld fokussiert ist, das Formular implizit abgeschickt), dann wird dies für ein Formular getan, dessen Standard-Button hat eine definierte Aktivierungsverhalten muss den User-Agent dazu veranlassen synthetische Klick-Aktivierungsschritte ausführen dazu Standard-Button .

Anmerkung: Wenn also die Standard-Button deaktiviert ist, wird das Formular nicht übermittelt, wenn ein solcher impliziter Übermittlungsmechanismus verwendet wird. (Eine Schaltfläche hat keine Aktivierungsverhalten wenn deaktiviert).

Eine standardkonforme Methode zur Deaktivierung der impliziten Übermittlung des Formulars besteht daher darin, eine deaktivierte Übermittlungsschaltfläche als erste Übermittlungsschaltfläche des Formulars zu platzieren:

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

Eine schöne Eigenschaft dieses Ansatzes ist, dass er funktioniert ohne JavaScript Unabhängig davon, ob JavaScript aktiviert ist oder nicht, ist ein standardkonformer Webbrowser erforderlich, um die implizite Formularübermittlung zu verhindern.

Answer 4

Wenn Sie ein Skript für die eigentliche Übermittlung verwenden, können Sie die Zeile "return false" wie folgt in den onsubmit-Handler einfügen:

<form onsubmit="return false;">

Der Aufruf von submit() im Formular über JavaScript löst das Ereignis nicht aus.

Answer 5

Ich musste alle drei Ereignisse im Zusammenhang mit dem Drücken von Tasten abfangen, um zu verhindern, dass das Formular abgeschickt wird:

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

Sie können alle oben genannten Punkte in einer schönen kompakten Version kombinieren:

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