Wie verhindert man das Absenden eines Formulars beim Drücken der Eingabetaste?

Verhindern der Formularübermittlung beim Drücken der EINGABETASTE

In webbasierten Anwendungen stellt die Verhinderung der Übermittlung der EINGABETASTE an der Übermittlung eines Formulars sicher, dass das Formular nur gesendet wird übermittelt, wenn der Benutzer explizit auf die Schaltfläche „Senden“ klickt. Dieser Ansatz verbessert die Benutzererfahrung und verhindert versehentliche Formularübermittlungen.

Um zu verhindern, dass die Eingabetaste die Formularübermittlung auslöst, können Sie den folgenden Codeausschnitt verwenden:

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

Sobald Sie die definiert haben Wenn Sie die checkEnter-Funktion verwenden, können Sie sie als Tastendruck-Handler an das Formular anhängen:

<form [...] onkeypress="return checkEnter(event)">

Alternativ können Sie Folgendes verwenden ES20xx-Ansatz:

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

Dieser Ansatz nutzt die Ereignisdelegation, um die Formularübermittlung zu verhindern, wenn die EINGABETASTE gedrückt wird, sodass der Benutzer mehrzeiligen Text in Textbereichselementen eingeben kann, ohne eine Übermittlung auszulösen.

Das obige ist der detaillierte Inhalt vonWie verhindert man das Absenden eines Formulars beim Drücken der Eingabetaste?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!