Wie kann ich das Senden eines Formulars beim Drücken der Eingabetaste verhindern und stattdessen benutzerdefiniertes JavaScript ausführen?

Verhindern der Formularübermittlung beim Drücken der Eingabetaste

Wenn ein Benutzer die Eingabetaste innerhalb eines Formulars drückt, besteht das Standardverhalten darin, das Formular abzusenden . In einigen Szenarien ist es jedoch erforderlich, die Formularübermittlung zu verhindern und stattdessen eine benutzerdefinierte JavaScript-Funktion auszuführen.

Um dies zu erreichen, kann der Ereignis-Listener im Formular so geändert werden, dass er das Drücken der Eingabetaste verarbeitet. So geht das:

document.querySelector("form").addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    // Prevent form submission
    e.preventDefault();

    // Call your JavaScript function
    customFunction();
  }
});

function customFunction() {
  // Your custom JavaScript function logic
}

In diesem Beispiel wird die Formularübermittlung durch den Aufruf von e.preventDefault() innerhalb des Event-Handlers verhindert. Durch Hinzufügen dieser Bedingung und Aufrufen der benutzerdefinierten Funktion löst die Eingabetaste die Funktion „customFunction()“ aus, anstatt das Formular abzusenden.

Hinweis:

Moderne Browser empfehlen die Verwendung von z. key anstelle von e.keyCode. Aus Kompatibilitätsgründen mit älteren Browsern kann es jedoch erforderlich sein, beide zu verwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich das Senden eines Formulars beim Drücken der Eingabetaste verhindern und stattdessen benutzerdefiniertes JavaScript ausführen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!