Wie verhindert man unerwünschte Formularübermittlungen beim Drücken der EINGABETASTE in Webanwendungen?

Verhindern Sie das Absenden von Webformularen beim Drücken der EINGABETASTE

In webbasierten Anwendungen kann das versehentliche Absenden von Formularen, das durch die EINGABETASTE ausgelöst wird, ein Ärgernis sein. Dieser Leitfaden bietet Lösungen, um ein solches unerwünschtes Verhalten zu verhindern.

Lösung 1: Benutzerdefinierter Tastendruck-Handler

Ein benutzerdefinierter Tastendruck-Handler kann für das Formular implementiert werden, um den Tastendruck der EINGABETASTE abzufangen und das Absenden des Formulars für alle zu verhindern Elemente außer Textbereichen.

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;

Lösung 2: Ereignisdelegation mit modernem JavaScript

Ein modernerer Ansatz mit Ereignisdelegation kann für die Verarbeitung von ENTER-Pressen verwendet werden. Bei diesem Ansatz wird das Ereignis auf Dokumentebene erfasst und nach dem nächstgelegenen Formularvorfahren gesucht. Nur gekennzeichnete Elemente mit dem Attribut „Dateneingabe zur Übermittlung“ lösen die Übermittlung des Formulars bei Eingabe der EINGABETASTE aus.

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

Zusätzliche Hinweise

• Textbereiche sollten anders gehandhabt werden, da das Drücken der EINGABETASTE darin erfolgt Ein Textbereich bedeutet normalerweise einen Zeilenumbruch.
• Die bereitgestellten Codefragmente sind anpassbar und können an spezifische Anwendungsanforderungen angepasst werden.

Das obige ist der detaillierte Inhalt vonWie verhindert man unerwünschte Formularübermittlungen beim Drücken der EINGABETASTE in Webanwendungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!