Focus : Démo HTML5

Mise à jour : 2017-01-22

Cette API s'enrichie d'un nouvel attribut et d'une nouvelle méthode, qui permettent d'en savoir plus sur le focus.

API

hasFocus() : renvoie un booléen qui indique si le document à le focus.
activeElement : donne l'élément qui a le focus.

Notes sur le tuto

Limitations :
- Safari sous iOS ne supporte pas "activeElement".

Exemple de code HTML5

hasFocus() : <span id="focus" class="ko">non supporté !</span><br><br>
<script>
	eltFocus = document.getElementById("focus")
	eltFocus.innerHTML = "le document "
		+ (document.hasFocus() ? "a" : "n'a pas") + " le focus"
	eltFocus.className = (document.hasFocus() ? "ok" : "ko")
	function activeElt() {
		activeElt = document.getElementById("activeElt")
		activeElt.innerHTML = "[" + document.activeElement.name + "] a le focus"
		activeElt.className = (document.activeElement.name ? "ok" : "ko")
	}
</script>
activeElement :
	<input
		type="button"
		name="bouton_test"
		value="Cliquez [bouton_test]"
		onclick="activeElt()">
	<span id="activeElt">...</span>

Démonstration du résultat HTML5

hasFocus() : non supporté !

activeElement : ...

Détection automatique du support HTML5

Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)

<script src="_html5detect.js"></script>
<script>
	isItemSupported("document.hasFocus", true);
	isItemSupported("document.activeElement");
</script>