Simuler un OnBlur sur Div en javascript

Version imprimable

12/04/2011, 16h47
PatSan

Simuler un OnBlur sur Div en javascript

J'ai conçu une combo box en javascript à l'aide de div pour l'input box et la liste déroulante.
Mon problème est de simuler un Onblur sur une div afin de gérer les fermetures de la liste déroulante lorsque le focus est perdu. Je sais que le Onblur ne s'applique pas aux div mais je me demande si on peut le simuler par un autre artifice.
Le but est de traiter la fermeture de la liste déroulante lorsqu'un focus est donné sur un autre objet tel que une iframe, une window, un champ de formulaire, une autre div,...
Un grand merci à celui qui pourra m'aider !!!
12/04/2011, 17h16
Pymento

Salut, je te propose des solutions, peut être pas les meilleures mais bon^^

Tu pourrai mettre un onFocus() sur tout les autres inputs.
Sinon il faudrait que tu récupère le click et les coordonnée de ta souris.
(un onclick sur le body et screen.X etc... devraient faire l'affaire) et tu sauras à chaque clic si tu doit masquer ou pas ta combo box.
12/04/2011, 21h53
PatSan

1- onFocus() sur tous les autres objets : solution pas très propre et beaucoup trop lourde à mettre en place.
2- Récupérer le click et les coordonnées de la souris dans le body : cela ne me permet pas de gérer le click dans un iframe ou sur une autre window.

En fait, je cherche à récupérer l'événement qui gère une sorte de 'onblur' sur l'objet div-combo box... De cette façon, peu importe ou on click, on sait que l'on vient de quitter la div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="nomDeMonDiv">MON  DIV<span>(enfant de mon div)</span></div>
<span>autre</span>
<script type="text/javascript">
	var monDivHaveFocus = false; // 
	function onFocusTraitement(monDiv){
		if(monDivHaveFocus == false) // seulement s'il n'avait pas encore le focus
			alert('focus'); // execution de onFocus
		monDivHaveFocus = true; // 
	}
	function onBlurTraitement(monDiv){
		if(monDivHaveFocus == true) // seulement s'il avait le focus
			alert('blur'); // execution de onBlur
		monDivHaveFocus = false; //
	}
	document.getElementsByTagName('HTML')[0].onclick = function(evt){
  		var evt = window.event || evt; // récupération de l'évènement
  		var target = evt.target || evt.srcElement; // récupération de l'objet cliqué
		for(;target.nodeName != 'HTML' && target.id != 'nomDeMonDiv';target=target.parentNode); // si les enfants ne sont pas considérés comme le div -> supprimer cette ligne
		if(target.id == 'nomDeMonDiv')
			onFocusTraitement(target);
		else
			onBlurTraitement(target);
	};
</script>

une seconde approche est de jouer avec les évènements "onmouseover" et "onmouseout" pour savoir si l'on est sur l'objet au moment du clique plutôt que de remonter dans l'arbre du DOM. (mais je préfère ma première solution.)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="nomDeMonDiv">MON  DIV<span>(enfant de mon div)</span></div>
<span>autre</span>
<script type="text/javascript">
	var monDivHaveFocus = false; // 
	function onFocusTraitement(monDiv){
		if(monDivHaveFocus == false) // seulement s'il n'avait pas encore le focus
			alert('focus'); // execution de onFocus
		monDivHaveFocus = true; // 
	}
	function onBlurTraitement(monDiv){
		if(monDivHaveFocus == true) // seulement s'il avait le focus
			alert('blur'); // execution de onBlur
		monDivHaveFocus = false; //
	}
	var over = false;
	var monDiv = document.getElementById('nomDeMonDiv');
	monDiv.onmouseover = function(){over=true};
	monDiv.onmouseout = function(){over=false};
	document.getElementsByTagName('HTML')[0].onclick = function(){
		if(over)
			onFocusTraitement(monDiv);
		else
			onBlurTraitement(monDiv);
	};
</script>

13/04/2011, 12h02
PatSan

Merci pour ta réponse.
J'avais déjà implémenté quelque chose qui ressemble à ta première solution en jouant avec target et srcElement mais malheureusement, elle ne fonctionne pas dans le cas suivant :
1- on click sur la div --> le focus se fait
2- on click sur une autre div DANS UNE IFRAME --> le blur ne se produit pas, la liste de la combo reste alors ouverte
Ce n'est pas un cas particulier car de nombreuses pages comportent des div dans la page même et au sein d'un d'iframe
Le blur ne se produit pas non plus si on click sur un élément d'une autre window.
Je cherche donc une solution générale qui fonctionnera dans tous les cas, comme l'objet SELECT des FORM...

rajoute :

Code:

1
2
3
window.onblur = function(){ 
    onBlurTraitement(document.getElementById('nomDeMonDiv'));
};

13/04/2011, 12h20
PatSan

J'ai ajouté de window.onblur à mon code et cela fonctionne sous Chrome, Firefox, Safari mais pas sous Opéra et Internet Explorer...
13/04/2011, 12h38
Willpower

Citation:

Envoyé par PatSan

J'ai ajouté de window.onblur à mon code et cela fonctionne sous Chrome, Firefox, Safari mais pas sous Opéra et Internet Explorer...

solution pour IE :

Code:

window.onfocus = function(){};

(lol) :mouarf:
13/04/2011, 13h45
PatSan

Cela fonctionne quand on click dans la page puis dans l'iframe --> la div de la page a reçu le 'blur'
Mais pas quand on click dans l'iframe puis dans la page --> la div de l'iframe n'a pas reçu le 'blur'
13/04/2011, 14h57
Willpower

les (i)frames sont hebergées sur le même domaine que la page principale ?
13/04/2011, 15h12
PatSan

1 pièce(s) jointe(s)

Oui.
Je t'envoie le zip de ce que j'ai fait, tu pourras peut-être voir ce qui ne va pas...
Fichier à lancer dans le browser : test.html
Encore merci pour le coup de main !!!
13/04/2011, 15h22
Willpower
Citation:

Envoyé par PatSan

Oui.
Je t'envoie le zip de ce que j'ai fait, tu pourras peut-être voir ce qui ne va pas...
Fichier à lancer dans le browser : test.html
Encore merci pour le coup de main !!!

je viens de commencer la lecture (j'ai horreur de lire du code de qqn) et j'ai déjà vu cette horrreur :
Code:

1 2 3 document.onclick=click_check; window.onblur=click_check; function click_check(){...};
ça fonctionne sous chrome (et p-ê d'autres) ! okay, mais en théorie (que ce soit en js ou dans un autre langage) ça ne devrait pas !

assigner un object qui n'existe pas encore. :roll:
13/04/2011, 15h29
PatSan

Mauvais copier-coller quand je t'ai transmis le fichier. J'ai dû prendre des bouts de code pour composer le zip. Normalement, le bout de code concernant le click_check est à la fin du fichier ddlb_class.js. Le reste semble ok au niveau des copier-coller.

j'ai vraiment la flemme de l'adapter à ton code. (désolé hein.)

donc voici une version qui fonctionne (même sous opéra) :

page principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="monDiv" style="background-color:green;height:100px;">MON  DIV</div>
<iframe id="maFrame" src="iframe.html"></iframe>
<script type="text/javascript">
	var monDiv;
 
	var maFrame = document.getElementById('maFrame');
	maFrame.onload = function(){
		maFrame.contentWindow.document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,maFrame.contentWindow)}; // gestion du click sur la frame
		// SI DIV DANS LA PAGE ENFANT
		//monDiv = maFrame.contentWindow.document.getElementById('monDivFrame');  
	}
	// SI DIV DANS LA PAGE PRINCIPALE
	//monDiv = document.getElementById('monDiv');
 
	var monDivHaveFocus = false; // 
	function onFocusTraitement(){
		if(monDivHaveFocus == false) // seulement s'il n'avait pas encore le focus
			monDiv.style.height = "200px";
		monDivHaveFocus = true; // 
	}
	function onBlurTraitement(){
		if(monDivHaveFocus == true) // seulement s'il avait le focus
			monDiv.style.height = "100px";
		monDivHaveFocus = false; //
	}
	function check_click(evt,win){
  		var evt = win.event || evt; // récupération de l'évènement
  		var target = evt.target || evt.srcElement; // récupération de l'objet cliqué
		for(;target.nodeName != 'HTML' && target.id != monDiv.id;target=target.parentNode); // si les enfants ne sont pas considérés comme le div -> supprimer cette ligne
		if(target.id == monDiv.id)
			onFocusTraitement();
		else
			onBlurTraitement();
	};
	document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,window)}; // gestion du click sur le parent
</script>

iframe:

Code:

1
2
 
<div id="monDivFrame" style="background-color:green;height:100px;">MON DIV IFRAME</div>

nb: ne fonctionnera peut-être pas en "local" sous certains navigateurs (comme chrome) qui considère que tes pages ont des domaines différents en local. (donc pas accès à l'iframe pour des raisons de sécurité.) mais tout refonctionnera normalement une fois mis en ligne.

solution qui gère une div dans la page enfant ET une div dans la page parent :

page principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div id="monDiv" style="background-color:green;height:100px;">MON  DIV</div>
<iframe id="maFrame" src="iframe.html"></iframe>
<script type="text/javascript">
	var monDiv;
 
	var maFrame = document.getElementById('maFrame');
	maFrame.onload = function(){
		maFrame.contentWindow.document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,maFrame.contentWindow)}; // gestiion du click sur la frame
		// DIV DANS LA FRAME
		monDivFrame = maFrame.contentWindow.document.getElementById('monDivFrame');  
		monDivFrame.haveFocus = false; 
	}
	// DIV DANS LA PAGE PRINCIPALE
	monDiv = document.getElementById('monDiv');
	monDiv.haveFocus = false;
 
	function onFocusTraitement(obj){
		if(obj.haveFocus == false) // seulement s'il n'avait pas encore le focus
			obj.style.height = "200px";
		obj.haveFocus = true; // 
	}
	function onBlurTraitement(obj){
		if(obj.haveFocus == true) // seulement s'il avait le focus
			obj.style.height = "100px";
		obj.haveFocus = false; //
	}
	function check_click(evt,win){
  		var evt = win.event || evt; // récupération de l'évènement
  		var target = evt.target || evt.srcElement; // récupération de l'objet cliqué
		for(;target.nodeName != 'HTML' && target.id != monDiv.id && target.id != monDivFrame.id;target=target.parentNode); // si les enfants ne sont pas considérés comme le div -> supprimer cette ligne
		if(target.id == monDiv.id){
			onFocusTraitement(monDiv);
			onBlurTraitement(monDivFrame);
		}
		else if(target.id == monDivFrame.id){
			onFocusTraitement(monDivFrame);
			onBlurTraitement(monDiv);
		}
		else{
			onBlurTraitement(monDivFrame);
			onBlurTraitement(monDiv);
		}
	};
	document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,window)}; // gestion du click sur le parent
</script>

iframe:

Code:

<div id="monDivFrame" style="background-color:green;height:100px;">MON DIV IFRAME</div>

13/04/2011, 16h46
PatSan

Merci pour ta solution qui marche sûrement.
Je cherche en fait une solution globale qui ne tient pas compte d'éléments spécifiques tels que les iframes ou les windows. Je cherche à avoir une classe combobox (ddlb_class.js dans le fichier zip) que je peux utiliser dans les windows, iframes,... sans code spécifique pour des iframe filles ou autres objets. Le code que je t'ai envoyé ne tient justement pas compte d'iframe filles ou de windows générées mais ne fonctionne pas malheureusement sous ie ou opéra.
Pas facile d'exprimer ce que je veux mais en gros, je cherche à ne pas avoir de code spécifique à des objets.

t'es difficile toi :mrgreen:

bon, voici une version générique avec des fonctions "setFocus" et "setBlur" applicable à autant d'objets que tu le souhaites :

page principale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
	var i,mesObjets = [];
	function setFocus(domObj,func){
		if(func)
			domObj._focus = func;
		if(domObj.haveFocus == undefined)
			mesObjets.push(domObj);
		domObj.haveFocus = false;
	}
	function setBlur(domObj,func){
		if(func)
			domObj._blur = func;
		if(domObj.haveFocus == "undefined")
			mesObjets.push(domObj);
		domObj.haveFocus = false;
	}	
	function onFocusTraitement(obj){
		if(obj.haveFocus === false) // seulement s'il n'avait pas encore le focus
				if(obj._focus)
					obj._focus(); 
		obj.haveFocus = true; //
	}
	function onBlurTraitement(obj){ 
		for(i=0;i<mesObjets.length;i++)
			if(mesObjets[i].haveFocus === true && mesObjets[i]!=obj){ // seulement s'il avait le focus et qu'il ne doit pas l'avoir
				if(mesObjets[i]._blur)
					mesObjets[i]._blur(); 
				mesObjets[i].haveFocus = false;
			} 
	}
	function check_click(evt,win){
  		var evt = win.event || evt; // récupération de l'évènement
  		var target = evt.target || evt.srcElement; // récupération de l'objet cliqué
		for(;target.nodeName != 'HTML' && target.haveFocus=="undefined";target=target.parentNode);// si les enfants ne sont pas considérés comme le div -> supprimer cette ligne
		if(target.haveFocus === false){
			onFocusTraitement(target);
		}
		onBlurTraitement(target);
	};	
	// gestion du click sur la frame
	for(i=0;i<window.frames.length;i++)
		window.frames[i].onload = function(){
			var frame = this;
			frame.document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,frame)}; 
		};
	// gestion du click sur la page principale
	document.getElementsByTagName('HTML')[0].onclick = function(e){check_click(e,window)};

exemple d'utilisation :

Code:

1
2
3
4
5
6
7
<div id="monDiv" style="background-color:green;height:100px;">MON  DIV</div>
<iframe id="maFrame" src="iframe.html"></iframe>
<script type="text/javascript">
	// exemple d'utilisation sur la page principale :
	setFocus(document.getElementById('monDiv'),function(){this.style.height = "200px";});
	setBlur(document.getElementById('monDiv'),function(){this.style.height = "100px";});
</script>

exemple d'une iframe :

Code:

1
2
3
4
5
6
7
8
9
10
11
<div id="monDivFrame" style="background-color:green;height:100px;">MON DIV IFRAME</div>
<script>
	window.top.onload = function(){
		setFocus = window.top.setFocus;
		setBlur = window.top.setBlur;
 
		// exemple d'utilisation dans la frame:
		setFocus(document.getElementById('monDivFrame'),function(){this.style.height = "200px";});
		setBlur(document.getElementById('monDivFrame'),function(){this.style.height = "100px";});
	};
</script>

edit:
résultat en ligne : http://willpower.110mb.com/sources/focus.htm

13/04/2011, 21h13
PatSan

Merci pour ta réponse assez complète et merci de prendre le temps de répondre, j'apprécie.
Tu vas me trouver plutôt chiant mais le script n'est pas assez portable pour une application web.
Le fait de définir la fonction 'window.top.onload' dans l'iframe rend le code pas assez générique, tout comme la boucle 'for(i=0;i<window.frames.length;i++)' dans la page principale.
N'existe-t-il pas d'événement que l'on puisse court-circuiter qui s'active lorsque l'on quitte une div pour une autre window ou une autre (i)frame ?
Ou ne peut-on pas reproduire de 'window.onblur=click_check;' sous ie et opéra ?

Citation:

Envoyé par PatSan

Merci pour ta réponse assez complète et merci de prendre le temps de répondre, j'apprécie.
Tu vas me trouver plutôt chiant mais le script n'est pas assez portable pour une application web.
Le fait de définir la fonction 'window.top.onload' dans l'iframe rend le code pas assez générique, tout comme la boucle 'for(i=0;i<window.frames.length;i++)' dans la page principale.
N'existe-t-il pas d'événement que l'on puisse court-circuiter qui s'active lorsque l'on quitte une div pour une autre window ou une autre (i)frame ?
Ou ne peut-on pas reproduire de 'window.onblur=click_check;' sous ie et opéra ?

t'es vraiment difficile toi !!

bon, je t'ai fait une version bien générique :
démo :
http://willpower.110mb.com/sources/test2.html

utlisation :
(s'utilise de la même manière sur une iframe que sur la page principale : code à placer à la fin du body)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <script type="text/javascript" src="http://willpower.110mb.com/sources/focus_blur.js"></script> <script type="text/javascript"> // mon div objet var monDiv = document.getElementById('monDiv'); // exemples de fonctions de gestion des évènements function focusHandler(){this.style.height = "200px";} function blurHandler(){this.style.height = "100px";} // exemple d'utilisation monDiv.setFocus(focusHandler); monDiv.setBlur(blurHandler); </script>

14/04/2011, 23h43
PatSan

Super mais cela ne fonctionne pas lorsque l'utilisateur change d'onglet ou de fenêtre...
15/04/2011, 11h01
Willpower

Citation:

Envoyé par PatSan

Super mais cela ne fonctionne pas lorsque l'utilisateur change d'onglet ou de fenêtre...

en principe ce comportement est normal, car ton div garde le focus au sein de la fenêtre active ou inactive.

mais si tu y tiens vraiment, je verrai ce que je peux faire. ;)

edit: si tes onglets(autres fenêtres) sont générés depuis ta page principale (window.open -> popup) alors la gestion pourra facilement se faire de la même façon que tes iframes.