Javascript drücken Sie die Eingabetaste, nicht absenden

In der Webentwicklung ist JavaScript eine unverzichtbare Programmiersprache. In vielen Fällen müssen wir einige Benutzervorgänge erfassen, z. B. die Eingabetaste, um bestimmte interaktive Effekte zu erzielen. Manchmal möchten wir jedoch nicht, dass das standardmäßige Formularübermittlungsverhalten der Eingabetaste auftritt. Was sollten wir in diesem Fall tun? In diesem Artikel erfahren Sie, wie Sie das standardmäßige Submit-Ereignis der Eingabetaste über JavaScript verhindern können.

Standardverhalten der Eingabetaste

Wenn der Benutzer in den meisten Webformularen die Eingabetaste in einem einzeiligen Textfeld drückt, wird das Formular automatisch gesendet. Dies ist das Standardverhalten des Browsers und eignet sich möglicherweise nicht für einige interaktive Effekte, z. B. ein einfaches Suchfeld. Wenn ein Benutzer ein Schlüsselwort in das Suchfeld eingibt und die Eingabetaste drückt und das standardmäßige Übermittlungsverhalten nicht verhindert wird, aktualisiert der Browser die Seite automatisch und die vom Benutzer eingegebenen Schlüsselwörter gehen verloren.

Verhindern Sie das Standardübermittlungsereignis der Eingabetaste

Um das Standardübermittlungsereignis der Eingabetaste zu verhindern, können Sie die Methode event.preventDefault() in JavaScript verwenden. Diese Methode kann das Standardverhalten des Elements verhindern, z. B. das Standard-Submit-Ereignis des Formulars verhindern.

Angenommen, wir haben den folgenden HTML-Code:

<form>
  <input type="text" id="search-input">
</form>

Wir können das standardmäßige Formularübermittlungsereignis der Eingabetaste durch den folgenden JavaScript-Code verhindern:

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    console.log('阻止回车键默认提交事件');
  }
});

Im obigen Code haben wir einen Keydown-Ereignis-Listener für das Eingabefeld hinzugefügt. Dieses Ereignis wird ausgelöst, wenn der Benutzer die Tastatur drückt. Im Ereignishandler ermitteln wir, ob der Benutzer die Eingabetaste gedrückt hat, und rufen in diesem Fall event.preventDefault() auf, um das Standardübermittlungsereignis des Formulars zu verhindern. Gleichzeitig geben wir eine Meldung an die Konsole aus, damit wir überprüfen können, ob der Code wirksam ist.

Zusätzlich zur Verhinderung des Standardübermittlungsereignisses des Formulars können wir nach der Methode event.preventDefault() auch unseren eigenen JavaScript-Code ausführen, um bestimmte interaktive Effekte zu erzielen.

Andere Hinweise

Bei der Implementierung der Verhinderung der Übermittlung von Ereignissen durch die Eingabetaste müssen Sie die folgenden Punkte beachten:

1. Die Methode event.preventDefault() ist nur für das Standardverhalten innerhalb des Ereignishandlers gültig, sofern dies der Fall ist Außerhalb des Event-Handlers hat der Aufruf dieser Methode keine Auswirkung.
2. Im Keydown-Ereignis können wir event.keyCode verwenden, um den vom Benutzer gedrückten Tastencode abzurufen. Der Tastencode der Eingabetaste ist 13.
3. In einigen Fällen, beispielsweise wenn die Logik der Eingabetaste im Suchfeld verarbeitet werden muss, während das Formular normal übermittelt werden kann, können wir dieses Problem durch Event-Bubbling lösen. Wenn wir im Keydown-Ereignishandler des Suchfelds das Standardverhalten nicht verhindern, wird das Ereignis zum Formularelement weitergeleitet und löst dadurch das Standardübermittlungsereignis des Formulars aus. Daher können wir dem Formularelement einen Submit-Ereignis-Listener hinzufügen und beim Absenden des Formulars unseren eigenen Code ausführen.

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('表单被提交！');
})

Fazit

JavaScript kann problemlos verhindern, dass die Eingabetaste standardmäßig Ereignisse übermittelt, wodurch ein freierer Interaktionseffekt erzielt wird. Mit der Methode event.preventDefault() können wir das Standardverhalten des Formulars verhindern, um den benötigten interaktiven Effekt zu erzielen. Gleichzeitig müssen wir auch darauf achten, wann und wie wir Standardverhalten in Ereignishandlern verhindern können, um unerwartete Fehler zu vermeiden.

Das obige ist der detaillierte Inhalt vonJavascript drücken Sie die Eingabetaste, nicht absenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!