Vous êtes ici

Block title
Block content

Récupérer l'élément HTML de la page ayant le focus

DOM/HTML/JS : Comment obtenir l'élément focused en JavaScript

HTML
Date de publication: 
mer, 01/01/2014 - 14:32
Dernière modification: 
mer, 09/13/2017 - 04:06
Auteur: 
david

Différentes méthodes en JavaScript permettant d'obtenir l'élément courant du document ayant le focus.

Utiliser l'attribut "document.activeElement" du DOM (HTML 5)

3 liens | aucun commentaire | 0 vote

Beginner
+1 0 -1
Vous n'avez pas voté...
Utiliser l'attribut "document.activeElement" du DOM (HTML 5)
Solution publiée le 08/20/2014 - 15:24 par david, dernière modification il y a 3 années 11 mois.

Vous cherchiez comment obtenir l'élément HTML de la page ayant l'état "focus", voici comment procéder en JavaScript "pur", compatible avec les navigateurs récents :

var elementFocused = document.activeElement;
Post-Scriptum :
Il y a 3 années 11 mois :

A noter que cet attribut fait partie de la spécification HTML 5, spécification encore en développement en 2014.

Liens (3)

Fichiers (0)

Commentaires (0)

Via l'événement onFocus et la librairie "prototype.js" (compatible avec les navigateurs plus anciens)

aucun commentaire | 0 vote

Beginner
+1 0 -1
Vous n'avez pas voté...
Via l'événement onFocus et la librairie "prototype.js" (compatible avec les navigateurs plus anciens)
Solution publiée le 08/20/2014 - 15:32 par david, dernière modification il y a 3 années 11 mois.

Voici une alternative à l'attribut "document.activeElement" pour récupérer l'élément ayant le focus en utilisant la librairie {{prototype.js}}, cette méthode à l'avantage de fonctionner avec des navigateurs plus anciens :

Le but étant d'enregistrer un écouteur d'évènements sur les éléments HTML de votre choix, ci dessous un exemple avec prototype.js pour tous les éléments de type "textarea" et "input" :

$$('textarea, input').invoke('observe', 'focus', function(event){
    return event.element();
});

 

Liens (0)

Fichiers (0)

Commentaires (0)

Via l'événement onFocus et la librairie "jQuery" (compatible avec les navigateurs plus anciens)

1 lien | aucun commentaire | 0 vote

Beginner
+1 0 -1
Vous n'avez pas voté...
Via l'événement onFocus et la librairie "jQuery" (compatible avec les navigateurs plus anciens)
Solution publiée le 08/20/2014 - 15:30 par david, dernière modification il y a 3 années 11 mois.

Vous pouvez également enregistrer un écouteur d'évènements sur les éléments HTML de votre choix, ci dessous un exemple avec jQuery pour tous les éléments de type "textarea" et "input" :

var inFocus = false;
$('textarea, input').focus(function() {
    inFocus = true;
});

 

Liens (1)

Fichiers (0)

Commentaires (0)