Wie kann ich verhindern, dass ein Formular beim Drücken der EINGABETASTE gesendet wird?

Verhindern der Formularübermittlung beim Drücken der EINGABETASTE

In Webanwendungen wird die EINGABETASTE häufig zum Senden eines Formulars verwendet. Manchmal ist es jedoch wünschenswert, zu verhindern, dass ein Formular beim Drücken der EINGABETASTE gesendet wird. Nachfolgend finden Sie zwei Methoden, um dies zu erreichen:

Methode 1: Onkeypress-Handler

Diese Methode verwendet den Onkeypress-Ereignishandler im Formular. Indem wir eine Funktion erstellen, die prüft, ob die gedrückte Taste die EINGABETASTE (Tastencode 13) ist und die Formularübermittlung nur zulässt, wenn es sich nicht um die EINGABETASTE handelt, können wir die sofortige Formularübermittlung verhindern. Der Code für diesen Ansatz lautet:

function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

Methode 2: Ereignisdelegierung mit modernem JavaScript

Ein modernerer Ansatz mit ES20xx und Ereignisdelegierung beinhaltet das Festlegen eines Tastendruck-Listeners auf das gesamte Dokument. Diese Methode prüft, ob das Formular mit der Zieleingabe über ein spezielles Attribut verfügt, das angibt, dass das Formular durch Drücken der EINGABETASTE gesendet werden soll. Der relevante JavaScript- und HTML-Code:

document.addEventListener(`keypress`, handle);

function handle(evt) {
  const form = evt.target.closest(`#testForm`);
  if (form) {
    if (evt.target.dataset.enterForSubmit) {
      if (evt.key === `Enter`) {
        evt.preventDefault();
        return logClear(`won't submit "${evt.target.value}"`);
      }
      return true;
    }
  }
}

<form>

Beide Methoden verhindern effektiv, dass ein Formular beim Drücken der EINGABETASTE gesendet wird, während Textbereichseingaben, die natürlich EINGABETASTE für Zeilenumbrüche verwenden, normal funktionieren.

Das obige ist der detaillierte Inhalt vonWie kann ich verhindern, dass ein Formular beim Drücken der EINGABETASTE gesendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!