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'));
};