Javascript focus-Event – Feld aktivieren • blur-Event – Feld verlassen

Fokus auf einem Eingabefeld

In erster Linie sind es Formularfelder, die durch eine Aktivierung in den Fokus kommen, oder durch elem.focus() aktiviert werden, aber auch HTML-a-Elemente können fokussiert werden:

• input
• select
• textarea
• button
• a href=""

Ohne den Einsatz von HTML zeigen die Browser mit einem blauen Rahmen (outline) an, dass ein Element aktiviert wurde, damit der Benutzer das fokussierte Element erkennt. Der Rahmen kann mit der Pseudoklasse CSS :focus als outline angepasst werden.

<form id="formfocus">
	<input type="text" placeholder="klick!" id="infocus">
</form>

const infocus = document.querySelector("#infocus")
infocus.addEventListener ("focus", evt => {
	evt.target.value = "Ich führe mich fokussiert"
	console.log ("wurde aktiviert")
})

Neben dem Klick / Touchstart gibt es weitere Aktionen, die ein Element in den Fokus bringen:

• Die Navigation zu einem Element mit der Tab-Taste oder der Tastatur, oder
• programmatisch durch elem.focus().
• Ein Fenster wird zum Vordergrundfenster (das ist aber ein anderer Fokus als auf einem input-, button- oder textarea-Element)

Am Rande: Löst das focus-Event eine Alert-Box aus, wird die Alert-Box bei jedem Klick auf den OK-Button erneut ausgelöst, denn das Betätigen des OK-Buttons bringt das aufrufende Element oder Objekt wieder in den Fokus.

Attribute

focus kann nicht gecancelt werden. disabled verhindert, dass ein Element aktiviert werden kann.

type

Typ des Ereignisses

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

Nein

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist

Fokus mit Javascript elem.focus() setzen

elem.focus() setzt den Fokus programmatisch.

const thisfocus = document.querySelector("#thisfocus");
const setfocus  = document.querySelector("#setfocus");
setfocus.addEventListener ("click", () => {
	thisfocus.focus()
});

Sobald ein Element im Fokus ist, kann ein Link durch die Return-Taste aktiviert werden. Ein Eingabefeld erwartet eine Eingabe, ein input type="submit" versendet Daten an die Anwendung im form-Element mit Return.

Die Enter-Taste aktiviert immer das aktuell aktivierbare fokussierte Element.

blur • Element verlassen

Das passiert z.B., wenn der Benutzer außerhalb des aktuellen Fensters oder Eingabefelds klickt, oder mit der Tab-Taste zu anderen Elementen der Seite navigiert oder wenn window.blur aufgerufen wurde.

blur • Javascript-Event für A, AREA, BUTTON, INPUT, SELECT, TEXTAREA

Das blur-Event kommt vor allem in Formularen zum Einsatz. Ein Event Handler für blur kann z.B. die Hintergrundfarbe des Eingabefeldes ändern, wenn der Benutzer nach der Eingabe außerhalb des Feldes klickt oder ein anderes Eingabefeld aktiviert. So wird deutlich sichtbar, dass dieses Feld jetzt wieder inaktiv ist. In dieser Hinsicht ist blur das Gegenteil von focus: focus meldet, dass der Benutzer ein Eingabefeld mit dem Cursor, der Tastatur oder dem Finger aktiviert hat.

Wenn der Benutzer ein Eingabefeld verlässt, kann ein Javascript die Eingabe bereits prüfen, ohne dass die Formularwerte an eine Anwendung auf dem Server gesendet werden müssen.

Attribute

timeStamp

Zeit in Millisekunden, zu der das Ereignis erzeugt wurde. Firefox auf dem Mac gibt 0 zurück, IE 7 gibt undefined zurück, Safari gibt einen timeStamp zurück

type

Art des Ereignisses.

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

Beispiel

Direkt bei der Eingabe feststellen, ob eine Zahl eingegeben wurde (z.B. vierstellige Jahreszahl).

Vierstellige Zahl eingeben und dann außerhalb des Eingabefeldes klicken:

function isNumberKey() {
   let year = document.getElementById('myText');
   year.onblur = function(evt) {
      myText = year.value;	
      let myRegEx = new RegExp ("^[0-9]{4}$");
      if (myText.match(myRegEx)) {
         let response = document.getElementById('response');
         response.innerHTML = 'Das war vierstellig. Brav.';
         return false;
      } else {
         let response = document.getElementById('response');
         response.innerHTML = 'Zahl vierstellig / nur Ziffern';
         return true;
      }
   }
}

Welches Element ist im Fokus?

Herausfinden, welches Element gerade im Fokus ist (das Element, das Events der Tastatur empfängt) mit activeElement (read only).

let active = document.activeElement.tagName;

Weitere Events der Formulare