Tester focus sur un objet

Version imprimable

Voir 40 message(s) de cette discussion en une page

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.

Voir 40 message(s) de cette discussion en une page