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

1. Nicht verwenden type="submit" für Eingänge oder Tasten.
2. Verwenden Sie type="Schaltfläche" und verwenden Sie js [Jquery/angular/etc], um das Formular an den Server zu übermitteln.

Answer 2

Wenn Sie Alpine verwenden, können Sie wie folgt vorgehen, um das Absenden des Formulars durch Drücken von Enter :

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

Alternativ können Sie auch die .window Modifikator zur Registrierung des Ereignis-Listeners auf der Root window Objekt auf der Seite anstelle des Elements.

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>

Answer 3

Ich musste verhindern, dass nur bestimmte Eingaben übermittelt werden, also habe ich einen Klassenselektor verwendet, damit dies eine "globale" Funktion ist, wo immer ich sie brauche.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

Und dieser jQuery-Code:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

Alternativ dazu, wenn Keydown nicht ausreicht:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

Einige Anmerkungen:

In Abwandlung verschiedener guter Antworten hier, die Enter Taste scheint zu funktionieren für keydown auf allen Browsern. Als Alternative habe ich Folgendes aktualisiert bind() zum on() Methode.

Ich bin ein großer Fan von Klassenselektoren und wäge alle Vor- und Nachteile sowie Leistungsdiskussionen ab. Meine Namenskonvention ist "idSomething", um anzuzeigen, dass jQuery es als id verwendet, um es von CSS-Styling zu trennen.

Answer 4

Es gibt hier bereits viele gute Antworten, ich möchte nur etwas aus einer UX-Perspektive beitragen. Tastatursteuerungen in Formularen sind muy wichtig.

Die Frage ist, wie man das Senden auf Tastendruck deaktivieren kann Enter . Nicht wie man ignoriert Enter in einer gesamten Anwendung. Daher sollten Sie den Handler an ein Formularelement und nicht an das Fenster anhängen.

Deaktivieren von Enter für die Übermittlung von Formularen sollte weiterhin Folgendes ermöglichen:

1. Einreichung des Formulars über Enter wenn die Schaltfläche "Senden" fokussiert ist.
2. Übermittlung des Formulars, wenn alle Felder ausgefüllt sind.
3. Interaktion mit Nicht-Submit-Buttons über Enter .

Dies ist zwar nur eine Standardformulierung, aber sie erfüllt alle drei Bedingungen.

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type');
  $node = e.target.nodeName.toLowerCase();
  if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Answer 5

Sie könnten eine JavaScript-Methode erstellen, um zu prüfen, ob die Enter Taste gedrückt wurde, und wenn dies der Fall ist, wird das Senden gestoppt.

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

Rufen Sie das einfach bei der Submit-Methode auf.