JavaScript focus- und blur-Ereignisse

JavaScript ermöglicht Ihnen eine detaillierte Kontrolle darüber, welches Element gerade fokussiert ist – also das Element, das Tastatureingaben empfängt. Die Ereignisse focus und blur lassen Sie in dem Moment reagieren, in dem ein Element den Fokus erhält oder verliert. Das ist die Grundlage für inline Formularvalidierung, das Hervorheben des aktiven Felds, den Aufbau tastaturfreundlicher Widgets und die Führung von Benutzern durch ein Formular. Dieser Artikel erklärt, was diese Ereignisse sind, wie sie sich von ihren bubbelnden Pendants focusin/focusout unterscheiden, und zeigt einige praktische Muster.

Diese Seite baut auf der Einführung in Browser-Ereignisse auf. Wenn Sie Ereignisse für viele Elemente gleichzeitig behandeln müssen, lesen Sie auch über Bubbling und Capturing.

focus und blur in JavaScript verstehen

Das Ereignis focus wird ausgelöst, wenn ein Element zum aktiven Ziel der Tastatureingabe wird – also das Element, auf das document.activeElement zeigt. Das Ereignis blur wird ausgelöst, wenn dieses Element den Fokus verliert, zum Beispiel weil der Benutzer woanders hinklickt, Tab drückt oder der Fokus programmatisch verschoben wird.

Standardmäßig können nur interaktive Elemente fokussiert werden: Links (<a href>), Formularsteuerelemente (<input>, <textarea>, <select>, <button>) und einige wenige andere. Um ein beliebiges Element fokussierbar zu machen – ein <div>, <span> oder <li> – geben Sie ihm ein tabindex-Attribut. Verwenden Sie tabindex="0", um es in die natürliche Tab-Reihenfolge einzufügen, oder tabindex="-1", um es nur per Skript fokussierbar zu machen (element.focus()).

Ein wichtiger Fallstrick: focus und blur bubbeln nicht. Ein an einem übergeordneten Element angebrachter Listener wird nicht ausgelöst, wenn ein untergeordnetes Eingabefeld den Fokus erhält. Wenn Sie Event-Delegation auf einem Container benötigen, verwenden Sie stattdessen die bubbelnden Gegenstücke focusin und focusout – sie verhalten sich identisch, propagieren aber den DOM-Baum aufwärts.

focus vs. blur vs. focusin vs. focusout

Für ein einzelnes, bekanntes Element sind focus/blur am einfachsten. Für ein ganzes Formular oder eine Liste von Feldern fügen Sie focusin/focusout einmal am Container an.

So implementieren Sie focus-Ereignisse

Um das focus-Ereignis zu verwenden, fügen Sie dem Element einen Listener hinzu. Das folgende Beispiel hebt ein Eingabefeld in dem Moment hervor, in dem es den Fokus erhält:

<input type="text" id="nameInput" placeholder="Enter Your Name">
<script>
  document.getElementById('nameInput').addEventListener('focus', function(event) {
    event.target.style.backgroundColor = 'lightblue';
  });
</script>

Dieser Code-Ausschnitt färbt den Hintergrund des Eingabefelds hellblau, wenn es fokussiert wird, und verbessert so die Benutzeroberfläche, indem angezeigt wird, wo der Benutzer gerade tippt. Für einfaches Styling sollten Sie die CSS-Pseudoklasse `:focus` als standardmäßige JavaScript-freie Alternative in Betracht ziehen:

input:focus {
  background-color: lightblue;
}

So implementieren Sie blur-Ereignisse

Die Validierung beim blur-Ereignis ist eine der häufigsten Verwendungen dieser Ereignisse: Sie lassen den Benutzer zu Ende tippen und prüfen dann den Wert, wenn er das Feld verlässt. So validieren Sie eine E-Mail-Adresse, wenn das Eingabefeld den Fokus verliert:

<input type="email" id="emailInput" placeholder="Enter Your Email">
<script>
  document.getElementById('emailInput').addEventListener('blur', function(event) {
    // Simplified regex for educational purposes
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(event.target.value)) {
      alert('Please enter a valid email address.');
      event.target.style.backgroundColor = 'salmon';
    } else {
      event.target.style.backgroundColor = 'lightgreen';
    }
  });
</script>

Dieses Skript prüft, ob die eingegebene E-Mail-Adresse einem Standardformat entspricht, und benachrichtigt den Benutzer, wenn die Eingabe ungültig ist. Die Hintergrundfarbe wechselt zu Grün bei gültiger und zu Lachs bei ungültiger Eingabe, um sofortiges visuelles Feedback zu geben.

Elemente per Skript fokussieren

Neben der Reaktion auf Ereignisse können Sie den Fokus selbst mit element.focus() verschieben und mit element.blur() entfernen. Dies ist nützlich, um den Cursor beim Laden der Seite in das erste Feld zu setzen oder um den Fokus nach der Validierung auf ein ungültiges Feld zurückzubringen.

<input id="search" placeholder="Search..." />
<button id="go">Focus the search box</button>
<script>
  document.getElementById('go').addEventListener('click', () => {
    document.getElementById('search').focus();
  });
</script>

Zwei hilfreiche Extras:

• document.activeElement gibt immer das Element zurück, das derzeit den Fokus hat (oder <body>, falls keines fokussiert ist). Es ist praktisch, um den Fokuszustand ohne Listener zu prüfen.
• focus({ preventScroll: true }) fokussiert ein Element, ohne es in den sichtbaren Bereich zu scrollen – nützlich, wenn Sie das Scrollen selbst steuern.

Für ein Feld, das sofort beim Laden der Seite fokussiert werden soll, ist das HTML-Attribut autofocus (<input autofocus>) die deklarative, JavaScript-freie Option.

focusin/focusout für Delegation verwenden

Da focus und blur nicht bubbeln, werden durch das Anhängen eines einzelnen Listeners an ein Formular keine Fokusänderungen an dessen Eingaben erfasst. Die bubbelnden Ereignisse focusin/focusout lösen dieses Problem – Sie behandeln jedes Feld über einen einzelnen übergeordneten Listener:

<form id="signup">
  <input name="email" placeholder="Email" />
  <input name="password" type="password" placeholder="Password" />
</form>
<script>
  const form = document.getElementById('signup');
  form.addEventListener('focusin', (event) => {
    event.target.style.outline = '2px solid royalblue';
  });
  form.addEventListener('focusout', (event) => {
    event.target.style.outline = '';
  });
</script>

Das Ereignis focusout stellt auch event.relatedTarget bereit – das Element, das als nächstes den Fokus erhält – womit Sie erkennen können, wohin der Fokus geht.

Fortgeschrittene Techniken: Mehrere Felder verwalten

Wenn ein Benutzer ein Formularfeld korrekt ausfüllt, können Sie den Fokus beim Verlassen des aktuellen Felds automatisch auf das nächste Eingabefeld verschieben. Das vereinfacht das Ausfüllen von Formularen, indem manuelle Klicks entfallen. So implementieren Sie dieses Verhalten:

<input type="text" id="firstName" placeholder="First Name" />
<input type="text" id="lastName" placeholder="Last Name" />
<div id="error" style="color: red;"></div> <!-- Display error message here -->
<script>
  document.getElementById('firstName').addEventListener('blur', validateFirstName);

  function validateFirstName(event) {
    const input = event.target;
    const errorDiv = document.getElementById('error');
    // Allow only letters and spaces, must not be empty
    const nameRegex = /^[A-Za-z ]+$/;
    if (!nameRegex.test(input.value)) {
      errorDiv.textContent = 'Please enter a valid first name.'; // Display error message
      input.style.backgroundColor = 'salmon'; // Set background to salmon on invalid input
      input.focus(); // Keep focus on the first name input to encourage correction
    } else {
      input.style.backgroundColor = 'white'; // Reset background to white on valid input
      errorDiv.textContent = ''; // Clear error message
      document.getElementById('lastName').focus(); // Optionally move focus to the last name input
    }
  }
</script>

Dieses Beispiel verschiebt den Fokus automatisch auf das Eingabefeld lastName, sobald ein gültiger Vorname eingegeben wurde, und verbessert so die Benutzererfahrung, indem manuelle Klicks reduziert werden.

Das Aufrufen von input.focus() innerhalb eines blur-Handlers kann mit dem Benutzer in Konflikt geraten. Wenn dieser versucht, auf ein anderes Element zu klicken, kann das erneute Fokussieren des Felds wie eine Falle wirken. Verwenden Sie dieses Muster sparsam und zeigen Sie lieber eine Fehlermeldung an, die der Benutzer in seinem eigenen Tempo beheben kann.

Häufige Fallstricke

• Erwarten Sie nicht, dass focus/blur bubbeln. Ein Container-Listener für focus wird niemals ausgelöst; wechseln Sie für Delegation zu focusin/focusout.
• blur wird ausgeführt, bevor der Klick auf ein anderes Steuerelement abgeschlossen ist. Wenn ein blur-Handler ein Element ausblendet oder entfernt, auf das der Benutzer gerade geklickt hat, wird der Klick möglicherweise nicht registriert – prüfen Sie zuerst event.relatedTarget.
• Verborgene oder display:none-Elemente können nicht fokussiert werden. element.focus() hat bei ihnen keine Wirkung.
• Das erzwungene Fokussieren schadet der Barrierefreiheit, wenn es unerwartet geschieht. Halten Sie die Tab-Reihenfolge der Tastatur vorhersehbar und vermeiden Sie es, den Fokus einzusperren.
• Für rein visuelles Fokus-Styling bevorzugen Sie die CSS-Pseudoklassen :focus / :focus-visible gegenüber JavaScript – sie benötigen keine Listener und funktionieren auch bei reiner Tastaturnavigation.

Fazit

focus- und blur-Ereignisse sind das Rückgrat interaktiver, barrierefreier Formulare. Wenn Sie wissen, dass focus/blur nicht bubbeln (und focusin/focusout es tun), wie man den Fokus mit element.focus() verschiebt und wo man die Grenze zwischen JavaScript und der CSS-Pseudoklasse :focus ziehen sollte, können Sie reaktionsfähige Eingabeerlebnisse entwickeln, ohne Ihre Benutzer zu überraschen.

Erkunden Sie als Nächstes verwandte Browser-Interaktionen: Tastaturereignisse, die change-, input-, cut-, copy- und paste-Ereignisse sowie Bubbling und Capturing für die Delegation.

Übungen