Wie verhindert man die Übermittlung von Webformularen beim Drücken der EINGABETASTE?

Verhindern der Übermittlung von Webformularen beim Drücken der EINGABETASTE

Beim Entwerfen webbasierter Anwendungen ist es oft wünschenswert, zu verhindern, dass die EINGABETASTE ein Formular sendet . Dies kann mit JavaScript erreicht werden.

Lösung:

Revision 2012 (Inline-Handler)

Definieren Sie eine Funktion checkEnter zu Verarbeiten Sie den ENTER-Tastendruck:

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

Weisen Sie diesen Handler dem Formular zu:

document.querySelector('form').onkeypress = checkEnter;

Dies verhindert die Übermittlung bei ENTER für alle Elemente außer Textbereichen.

Revision 2024 (Ereignisdelegation)

Implementieren Sie einen moderneren Ansatz mithilfe der Ereignisdelegation:

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

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

Fügen Sie den Elementen, die Sie bei ENTER übermitteln möchten, das Attribut „Dateneingabe zur Übermittlung“ hinzu :

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

Das obige ist der detaillierte Inhalt vonWie verhindert man die Übermittlung von Webformularen beim Drücken der EINGABETASTE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!