Discussion :

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

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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>