Javascript onfocus / onblur

Javascript onfocus

Javascript onfocus ruft einen Event Handler auf, wenn ein Element in den Fokus kommt, weil der Benutzer auf das Element aktiviert. onblur aktiviert einen Event Handler, wenn ein Fenster oder ein Element (z.B. ein Eingabefeld eines Formulars) den Fokus verliert – verlassen wird. onblur ist sozusagen das Gegenteil von onfocus.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Fokus auf einem Eingabefeld

onfocus kommt vor allem in Eingabefeldern von Formularen zum Einsatz. Die mobilen Geräte emulieren onfocus durch ontouchstart. Oft zu sehen: Dem Hintergrund wird eine andere Farbe zugewiesen, damit der Benutzer deutlich sieht, welches Eingabefeld aktiviert wurde. Für solche einfache Aufgaben wie das Erkennen des aktiven Elements kann auch CSS :focus benutzt werden.

.klick:focus { 
    background: lightsteelblue; 
}

Neben dem Klick / Touchstart gibt aber auch andere Events, die ein Element in den Fokus bringen:

  • Die Navigation zu einem Element mit der Tab-Taste oder der Tastatur
  • Ein Fenster wird zum Vordergrundfenster

Löst onfocus 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 wird.

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

Beispiel

if (window.focus) {
}

prüft, ob der Browser die Methode focus unterstützt.

if (window.focus()) {
}

prüft, ob der Fokus auf dem Fenster liegt.

...
</head>
<body>
   <form>
      <p><input type="text" name="text1"
	    value="Aktiviere mich mal!" id="theInput" /></p>
   </form>
</body>
</html>

...	
<script type="text/javascript">
document.getElementById('theInput').onfocus = function () {
   this.setAttribute ('value','Ich fühle mich aktiviert');
};
</script>

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 Javascript onblur 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 onblur das Gegenteil von onfocus: onfocus 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;