Simuler un OnBlur sur Div en javascript [Résolu]

[PatSan]

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 !!!

[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.

[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.

[Willpower]

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>

[Willpower]

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>

[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...

[Willpower]

rajoute :

Code :

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

[PatSan]

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

[Willpower]

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)

[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'

[Willpower]

les (i)frames sont hebergées sur le même domaine que la page principale ?

[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 !!!

[Willpower]

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.

[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.

[Willpower]

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.

[Willpower]

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>

[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.

[Willpower]

t'es difficile toi

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

[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 ?

[Willpower]

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>