CSS, HTML und Javascript mit {stil}

Javascript onfocus / onblur

Session Storage

Javascript onfocus führt einen Event Handler aus, wenn ein Element in den Fokus kommt (aktiviert wird), weil der Benutzer auf das Element klickt oder mit der Tastatur zum Element navigiert. Die mobilen Geräte emulieren onfocus durch ontouchstart.

onblur aktiviert einen Event Handler, wenn ein Fenster oder ein Element (z.B. ein Eingabefeld eines Formulars) den Fokus verliert – verlassen wird. onblur ist das Gegenteil von onfocus.

onfocus kommt vor allem in Eingabefeldern von Formularen zum Einsatz. Oft zu sehen: Dem Hintergrund wird eine andere Farbe zugewiesen, damit der Benutzer deutlich sieht, welches Eingabefeld aktiviert wurde. Für solch einfache Aufgaben kann heute allerdings auch CSS benutzt werden.

#klick:focus { 
    background: rosybrown; 
    color: white
}

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
  • mittels setActive durch ein Script.

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>

onblur • 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

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

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