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

Verwendung:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

Diese Lösung funktioniert bei allen Formularen auf einer Website (auch bei Formularen, die mit Ajax eingefügt werden) und verhindert nur Enter s in Eingabetexten. Legen Sie sie in eine dokumentenfertige Funktion, und vergessen Sie dieses Problem für immer.

Answer 2

Ich kann noch keinen Kommentar abgeben, also werde ich eine neue Antwort schreiben

Die akzeptierte Antwort ist in Ordnung, aber sie hat das Absenden bei der Eingabe mit dem Ziffernblock nicht gestoppt. Zumindest in der aktuellen Version von Chrome. Ich musste die Keycode-Bedingung zu diesem ändern, dann funktioniert es.

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

Answer 3

Ein völlig anderer Ansatz:

1. Die erste <button type="submit"> im Formular wird aktiviert, wenn Sie auf Enter .
2. Dies gilt auch, wenn die Schaltfläche mit style="display:none;
3. Das Skript für diese Schaltfläche kann Folgendes zurückgeben false wodurch der Einreichungsvorgang abgebrochen wird.
4. Sie können noch eine weitere <button type=submit> um das Formular abzuschicken. Einfach zurücksenden true um die Übermittlung zu kaskadieren.
5. Drücken Sie Enter während die eigentliche Schaltfläche "Senden" fokussiert ist, wird die eigentliche Schaltfläche "Senden" aktiviert.
6. Drücken Sie Enter innerhalb <textarea> oder andere Steuerelemente des Formulars verhalten sich wie gewohnt.
7. Drücken Sie Enter innerhalb <input> Formularsteuerelemente wird die erste <button type=submit> die folgende Ergebnisse liefert false und so geschieht nichts.

So:

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

Answer 4

Anstatt die Nutzer daran zu hindern, die Enter was unnatürlich erscheinen mag, können Sie das Formular so lassen, wie es ist, und eine zusätzliche clientseitige Validierung hinzufügen: Wenn die Umfrage nicht abgeschlossen ist, wird das Ergebnis nicht an den Server gesendet, und der Benutzer erhält eine nette Meldung, die ihm mitteilt, was er noch tun muss, um das Formular abzuschließen. Wenn Sie jQuery verwenden, probieren Sie das Validation-Plugin aus:

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

Dies wird mehr Arbeit erfordern als das Einfangen der Enter Taste, aber es wird sicherlich eine reichere Benutzererfahrung bieten.

Answer 5

Eine schöne einfache kleine jQuery-Lösung:

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