Tester focus sur un objet

Version imprimable

27/03/2007, 13h09
calitom

Tester focus sur un objet
Bonjour,

Je souhaite faire un test sur le focus...
Voici ce que j'ai fait mais qui ne marche pas:
Code:

1 2 3 4 5 6 7 8 9 if(document.getElementById('boxContent1').focus) { doCommand('insertImage'); } else { alert('Il faut etre dans un div'); }
Comment faire pour que ma fonction s'execute si le focus est dans l'element boxContent1 et affiche la fenetre alert dans tous les autres cas?
Merci d'avance
27/03/2007, 13h42
cerede2000

Hum deja les element DIV n'ont pas de propriété focus :S
27/03/2007, 13h58
Bisûnûrs

Code:

focus()
27/03/2007, 14h33
calitom

J'ai essayé avec

Code:

focus() et focus()==true

Et ca ne marche pas...

Comment faire?
Y a t'il une autre méthode?
27/03/2007, 14h37
cerede2000

Hum en javascript la methode focus() set a donné le focus mais elle ne renvoi rien ;)
27/03/2007, 14h59
calitom

Oui j'ai compris, mais n'existe t'il pas une fonction permettant de tester si le focus est dans un element?

Du genre isfocus() ou je ne sais pas, si une telle fonction n'existe pas comment puis je la faire? A partir de quelles autres fonctions?
27/03/2007, 15h06
Bisûnûrs

Ca n'existe pas en Javascript ..

Ce que tu peux faire, tu déclares une variable globale à false, et si jamais ton élément a eu le focus tu la bascules à true et quand il le perd tu la remets à false.

Tu n'as plus qu'à tester si ta variable est à true.
27/03/2007, 15h10
calitom

Oui mais comment detecter que mon div a le focus et comment detecter qu'il le perd?
27/03/2007, 15h15
cerede2000

Moi je ferais un truc du style tu regarde la position de ton DIV, et tu compare avec la position du curseur...
C'est le seul moyen que je voit pour faire vraiment ce que tu veut ;)
27/03/2007, 15h20
Bisûnûrs

Citation:

Envoyé par calitom

Oui mais comment detecter que mon div a le focus et comment detecter qu'il le perd?

C'est pas clair ton histoire. Tu appelles quoi "avoir le focus pour un div" ?
Les éléments qui peuvent avoir un focus sont ceux que tu peux clairement voir quand tu navigues avec la touche tab. Or un div n'est pas "focusable".

Alors explique-nous, à quel moment peux-tu dire qu'un div a le focus (textuellement parlant, pas informatiquement) ?
27/03/2007, 15h48
calitom

En gros, j'ai un (ou plusieurs) div editable(s) dont l'id est (ou sont) boxContent1 (boxContent2 boxContent3...)

Tous ces div sont draggables car contenu dans un autre div draggable...
Et tous ces div draggables sont contenus dans un div général.
Au dessus, j'ai des barres d'outil permettant d'editer le texte de mes div boxContent, d'y ajouter des images...

Le truc c'est que je souhaite pouvoir ajouter du contenu(images, liens...) uniquement dans les div boxContent.
D'ou la nécessité de détecter que le focus est dans le div éditable...

Car si on est pas dans un div éditable, pour le moment, la fonction doCommand('insertimage') insert une image hors de mes div et je souhaite rendre ca impossible...

Est ce que j'ai été clair?
27/03/2007, 15h53
cerede2000

Oui parfaitement, a ce moment la tu faire un truc avec l'evenement onclickdes DIV, quand tu clique dans un DIV tu recupere le nom, ou l'id ou ce que tu veut et tu le traite apres ;)
27/03/2007, 16h03
calitom

Et si l'utilisateur clique plusieurs fois sur le div ca pose probleme!
C'est pour ca que je dois absolument etre sur qu'il a le focus dans un div editable
27/03/2007, 16h06
SpaceFrog
y'a au moins 5 ans j'ai mis un code pour choper le focus ...

colle une variable globale sur la page et ajoute une fonction à tous les objets dont tu veux verifier le focus ...
Code:

1 2 3 4 var gotfocus; // puis dasn les balises des objets à surveiller : onfocus='gotfocus=this'
en suite pour savoir si ton objet à le focus

Code:

if (obj==gotfocus)
27/03/2007, 16h07
cerede2000

Pourquoi ca pose probleme, tu peut tres bien utiliser le nom et l'id et mettre un repere qui te permet de savoir si la DIV est editable ou pas...
De toute facon tu n'as pas de fonction toute faite, donc si tu cherche la simplicité ce n'est pas possible ;)

Edit: Oui mais SpaceFrog, les div n'ont pas l'attrubit onfocus :S
27/03/2007, 16h10
SpaceFrog

exact... suffit de passer par le onkeydown, onmouseover ou autre ...
27/03/2007, 16h11
calitom

Le div est tous le temps editable, le fait de recuperer le nom du div ne m'apporte rien...

Le div peut exister, et le focus peut quand meme etre hors du div, si le client ajoute le div et qu'il clique a coté du div, le div perd son focus, et s'il fait un test sur le nom ou l'id du div, il trouvera bien quelque chose, mais il ne pourra pas dire si oui ou non il a le focus...
27/03/2007, 16h12
calitom

Oui mais il me faudrait un onfocus, mais je ne crois pas que ca existe
27/03/2007, 16h14
cerede2000

On la dit je ne sait combien de fois :S pas de onfocus sur une DIV tu est obligé de passé par un stratagème tordu ;)
27/03/2007, 16h26
calitom

J'ai testé le onfocus, et ca marche...
Donc j'arrive a faire une action lorsque le focus arrive dans mon div editable...

Maintenant il me faudrait un truc du genre onfocusout !!
Une idée?
27/03/2007, 16h27
cerede2000

Hein? Si tu met l'attribut onfocus sur ton DIV ca marche?
Sur IE et sur Firefox???

Sur firefox j'arrive pas a editer mes div...
Sur IE7 ca marche niquel.
D'ailleurs ca m'arrangerait de pouvoir editer mes div avec firefox au passage si qq'un a une solution...

Voici le code de mes div:
Code:

1 2 3 4 5 <DIV class=box id=boxHandle1 style="Z-INDEX: 1; FILTER: alpha(opacity=100); LEFT: 179px; POSITION: relative; TOP: 134px; opacity: undefined" onclick="changeZindex('boxHandle1')"> <DIV class=lefthandle id=lefthandle1></DIV> <DIV class=righthandle id=righthandle1 onclick="delDiv('boxHandle1')"></DIV> <DIV id=boxContent1 contentEditable=true onfocus="javascript:alert('salut');">ici votre image ou votre texte</DIV></DIV>

27/03/2007, 16h33
cerede2000

C'est bien ce qu'il me semblait on ta dit qu'il n'existait pas de onfocus sur les divs j'en ai marre de me repeté! Ca marche sur IE parce que il ne respecte pas les standards! Mais pour FF tu devra trouvé une solution comme on te le dit depuis le debut.....
Et en passant rajouté des attributs a tes DIV comme cotenteditable ce n'est pas non plus respecté les normes W3C....
27/03/2007, 16h34
Bisûnûrs

Mouais, encore un truc qui ne fonctionne que sur IE ..

contentEditable ne marche que sur IE. Ca ne devrait même pas exister un machin pareil.
27/03/2007, 16h35
cerede2000

Je t'ai grillé Bisûnûrs :D
27/03/2007, 16h35
SpaceFrog

sinon il faut passer pas onkeydown et onkeyup pour rendre le div editable ...
27/03/2007, 16h35
calitom

Il n'existe pas d'équivalent de contentEditable pour FF?
27/03/2007, 16h37
cerede2000

Voici les attributs standards des DIV:
http://giminik.developpez.com/xhtml/div.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type='text/javascript' language="JavaScript">
function akChk() 
{ 
var touche = event.keyCode
document.getElementById('page').innerHTML+=String.fromCharCode(event.keyCode)
 
} 
</script>
 
</head>
<body onkeydown="akChk()">
<div id='page'></div>
 
</body>

à adapter pour Ffx ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="JavaScript">
function akChk(e) 
{ 
var touche = e.keyCode ||e.charCode
document.getElementById('page').innerHTML+=String.fromCharCode(touche)
 
} 
</script>
 
</head>
<body onkeydown="akChk(event)">
<div id='page'></div>
 
</body>

reste à brider les caractères saisissables ...

Parce que si j'ai utilisé contentEditable, c'est pour pouvoir editer le contenu du div avec le code suivant:

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<div id="ToolBar_1" class="ToolBar" style="display : block; padding-bottom : 2px;">
<img unselectable="on" src="doc/orange_spacer.gif" title="" />
<img src="doc/orange_cut.gif" onclick="doCommand('cut');" title="Couper (Ctrl X)"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_copy.gif" onclick="doCommand('copy');" title="Copier (Ctrl C)"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_paste.gif" onclick="doCommand('paste');" title="Coller (Ctrl V)"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img unselectable="on" src="doc/orange_spacer.gif" title="" />
<img src="doc/orange_undo.gif" onclick="doCommand('undo');" title="Annuler (Ctrl Z)"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_redo.gif" onclick="doCommand('redo');" title="R&eacute;tablir (Ctrl Y)"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img unselectable="on" src="doc/orange_spacer.gif" title="" />
<img src="doc/orange_link.gif" onclick="doCommand('createLink');"
     title="Lien hypertexte" unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_nolink.gif" onclick="doCommand('Unlink');"
     title="Supprimer un lien hypertexte" unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img unselectable="on" src="doc/orange_spacer.gif" title="" />
<img src="doc/orange_image.gif" onclick="doCommand('insertImage');"
	 title="Image" unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_hr.gif" onclick="doCommand('InsertHorizontalRule');" title="Ligne horizontale"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_liste_puce.gif" onclick="doCommand('InsertUnorderedList');" title="Liste &agrave; puces"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_liste_num.gif" onclick="doCommand('InsertOrderedList');" title="Liste &agrave; num&eacute;ros"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_indent.gif" onclick="doCommand('Indent');" title="Augmenter le retrait - D&eacute;caler &agrave; droite"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
<img src="doc/orange_outdent.gif" onclick="doCommand('Outdent');" title="Diminuer le retrait - D&eacute;caler &agrave; gauche"
     unselectable="on" class="ToolOut"
     onmouseover="this.className='ToolOver';" onmouseout="this.className='ToolOut';" />
</div>
 
 
// exécuter les commandes
function doCommand (idCommand){
	setFocus();
	oSelection = document.selection.createRange();
	// Cas où police texte
	if(idCommand == "FontName"){
		if(arguments[1] != 1){
			document.execCommand(idCommand,false, arguments[1]);
			setFocus();
			document.FontForm.FontSelect.selectedIndex = 0;
			return;
		}
	}
	// Cas où taille texte
	else if(idCommand == "FontSize"){
    	if(arguments[1] != 0){
      		document.execCommand(idCommand,false, arguments[1]);
			setFocus();
			document.FontForm.FontSizeSelect.selectedIndex = 0;
			return;
    	} 
	}
	// Cas "ForeColor" ou "FormatBlock" ou "FormatBlock"
	else if(idCommand == "ForeColor" || idCommand == "BackColor" || idCommand == "FormatBlock"){
     	document.execCommand(idCommand,false, arguments[1]);
		setFocus();
		return;
	}
	// Cas où suppression d'une ancre
	else if (idCommand == 'UnBookmark'){
		if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné
			// on essaye de sélectionner le caractère suivant
			oSelection.moveEnd("character", +1);
			oSelection.collapse();
			oSelection.expand("character");
			if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent
				oSelection.moveEnd("character", -2);
				oSelection.collapse();
				oSelection.expand("character");
				if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on ne sélectionne rien
					oSelection.collapse();
				}
			}
		}
		oSelection.select();
		oSelection = document.selection.createRange();
	}
	// Cas où insertion d'une ancre
	else if (idCommand == 'CreateBookmark'){
		var ancre = prompt("Entrez le nom de l'ancre","");
		if(ancre == ""){
			alert("Vous devez donner un nom à votre ancre");
			return;
		}
		else if(ancre){
			if (oSelection.text == ""){ // s'il n'y apas de texte sélectionné
				// on essaye de sélectionner le caractère suivant
				oSelection.moveEnd("character", +1);
				oSelection.collapse();
				oSelection.expand("character");
				if(oSelection.text != " "){ // si le caratère suivant n'est pas un "espace", on sélectionne le précedent
					oSelection.moveEnd("character", -2);
					oSelection.collapse();
					oSelection.expand("character");
					if(oSelection.text != " "){ // si ce n'est toujours pas un espace, on sélectionne le mot
						oSelection.collapse();
						oSelection.expand("word");
						if(oSelection.text.lastIndexOf(" ") != -1){ // si le mot se termine par un espace => ne pas sélectionner l'espace
							oSelection.moveEnd("character", -1);
						}
					}
				}
				oSelection.select();
				oSelection = document.selection.createRange();
			}
			document.execCommand(idCommand, false, ancre);
		}
		return;
	}
	// Cas où insertion d'une image
	else if (idCommand == "insertImage"){
		Calk = window.document.getElementById("Avertissement_0");
		Calk.style.display = 'block' ;
		document.execCommand(idCommand, true);
		Calk.style.display = 'none' ;
		return;
	}
	// Exécute les autres commandes telles quelles
	document.execCommand(idCommand);
}

Comment faire pour pouvoir effectuer ces actions dans un textarea, ce qui me permettrait de faire en sorte que ca marche dan firefox et ainsi de respecter les normes W3C!!

Code:

1
2
<div id="div1" onclick="swapType(this, document.getElementById('text1'))" style="width:200px;height:200px;font-family:arial;font-size:12px">Texte</div>
<textarea onblur="swapType(this, document.getElementById('div1'))" id="text1" style="border:0;display:none;width:200px;height:200px;font-family:arial;font-size:12px;overflow:auto">Texte</textarea>

Code:

1
2
3
4
5
6
7
8
9
10
11
function swapType(obj1, obj2){
   obj1.style.display = 'none';
   obj2.style.display = 'block';
   if(obj1.value){
      obj2.innerHTML = obj1.value;
   }
   else{
      obj2.value = obj1.innerHTML;
      obj2.focus();
   }
}

27/03/2007, 17h23
SpaceFrog

contentEditable ne marche pas et ne marchera jamais dans firefox ...

Tu peux même gérer les sauts de ligne avec un replace ..

Code:

1
2
3
4
5
6
7
   if(obj1.value){
      obj2.innerHTML = obj1.value.replace(/\n/g,'<br>');
   }
   else{
      obj2.value = obj1.innerHTML.replace(/<br>/g,'\n');
      obj2.focus();
   }

27/03/2007, 17h49
calitom

Parce que ma problematique, c'est avoir un div dragable ou on peut ajouter du texte et mettre en forme ce texte, et de meme avoir la possibilité d'ajouter une image dans un div lui aussi draggable avec la possibilité de l'agrandir.

La difficulté est d'avoir un div général avec une barre d'outils au dessus, et de pouvoir ajouter autant de div textee ou de div image dans ce div général tout en ayany la possibilité d'utiliser la barre d'outil pour mettre en forme le texte et pour ajouter des images...

En gros dans ma barre d'outil il y aurait un bouton "ajouter div texte" un autre "ajouter div image" et tous les boutons des editeurs de texte(changer la police, la taille du texte, la couleur du texte, ajouter un lien...)

En gros j'arrive a avoir des div draggables où je peux modifier le texte (en utilisant prototype.js et ces fonctions sympathiques), mais je n'arrive pas à mettre en forme le contenu des textarea des div draggables a partir des boutons de ma barre d'outil...

Est ce que mon probleme est clair?
Si quelqu'un a des pistes pour m'aiguiller sur une piste me permettant d'avoir une barre d'outil que je puisse utiliser sur des textarea ca serait génial..
Peut etre y a t'il moyen de faire ca avec prototype.js, ce qui serait génial...
27/03/2007, 19h12
Bisûnûrs

Dans ce cas tu peux même essayer d'intégrer FCKEditor.

Vu que tu intègres Prototype, tu n'es plus à ça près.