Fokus auf einem Eingabefeld
Das focus-Event kommt vor allem in Eingabefeldern von Formularen zum Einsatz. Die mobilen Geräte emulieren focus durch touchstart. 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 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 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 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;
