[debutant] smiley

Version imprimable

21/02/2006, 10h50
cyrill.gremaud

[debutant] smiley

salut

jaimerai savoir comment je pourrait faire que lorsque je click sur une image, sa menvoie un code de texte dans une zone de texte ????

merci

Code:

1
2
3
4
 
<img scr="..." onclick="document.getElementById('zoneText').innerHTML = 'Mon text'">
 
<div id="zoneText"></div>

21/02/2006, 13h40
SpaceFrog

+= serait sans doute plus approprié ...

maintenant pour l'inséer à l'endroit du curseur c'est une autre paire de manches ...
21/02/2006, 15h07
cyrill.gremaud

c'est dur ?

Citation:

Envoyé par cyrill

c'est dur ?

Le code BB qui fait ça. A toi de voir :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function emoticon(text) {
	var txtarea = document.post.message;
	text = ' ' + text + ' ';
	if (txtarea.createTextRange && txtarea.caretPos) {
		var caretPos = txtarea.caretPos;
		caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text;
		txtarea.focus();
	} else {
		txtarea.value  += text;
		txtarea.focus();
	}
}

21/02/2006, 15h56
SpaceFrog

aussi simple que ça pour IE et ffx ?
c'est pas que la partie IE ça ?
21/02/2006, 18h06
zulot

une ptite explication du code serait la bienvenue non?

parceque je comprend pas deja la 1er variable txtarea d'ou ca sort dsl :oops:

enfin un ptit peu d'aide :-) ou un lien sur un tuto par exemple moi j'aime bien les tuto :-)

Voila j'aitrouvé un morceaux de code qui fonctionne super bien et pas trop compliqué a comprendre

le code javascript :

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
 
<script language="JavaScript" type="text/JavaScript"> 
<!-- 
 function addSmiley(codesmiley) 
  { 
  var msg = document.messagerie.mtexte; // Remplace formulaire par le nom de ton formulaire 
                                          // et zonetext par le nom de la textbox ou textarrea 
 
   // Compatible IE 
   if(document.selection) 
   { 
   msg.focus(); 
   sel = document.selection.createRange(); 
   sel.text = codesmiley; 
   document.step2.focus(); 
   } 
  else if(msg.selectionStart || msg.selectionStart == "0") 
   { 
   var startPos = msg.selectionStart; 
   var endPos = msg.selectionEnd; 
   var chaine = msg.value; 
 
   msg.value = chaine.substring(0, startPos) + codesmiley + chaine.substring(endPos, chaine.length); 
   msg.selectionStart = startPos + codesmiley.length; 
   mdg.selectionEnd = endPos + codesmiley.length; 
   msg.focus(); 
   } 
  else 
   { 
   msg.value += codesmiley; 
   msg.focus(); 
   } 
  } 
//--> 
</script>

Le code a inséré pour les liens

Code:

1
2
3
4
 
<a href="#" onClick="addSmiley(' {CODE} '); return(false)">
<img src="forum\images\smiles/{LIEN1}" name="{NAME1}" title="{TITTLE1}" width="16" height="16" border="0">
</a>

il faut biensur remplacer le code des variables en {} par les bonnes valeurs.

voila en esperant t'avoir aidé.

maintenant y a peut etre plus simple mais faut m'expliquer lol

Par contre j'arrive pas a faire fonctionner le code phpbb que j'ai a peu pres compris je dois avoir un problem de lien sans doute

EDIT :

Apres avoir reflechis sur le code ect j'ai enfin trouvé mon bonheur.

Le premier code tres long mais tres simple a comprendre m'a beaucoup aidé pour le suivant.
D'ailleur y a une faute dedans.

Le premier code ne continue pas sur la ligne ou on est et est tres lent me rafraichis la page ect....

Le deuxieme code (phpbb) lui trtes complexe au premier abord, mais tres efficace, en consultant les code source des pages htlm généré j'ai compris comment ils fonctionnaient alors petite explication.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function emoticon(text) { var txtarea = document.post.message; //remplacer post par le nom du formulaire ou va agir la fonction // remplacer message par le nom du textarea ou va se metre le code du smiley /!\ ne pas se tromper. text = ' ' + text + ' '; if (txtarea.createTextRange && txtarea.caretPos) { var caretPos = txtarea.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text; txtarea.focus(); } else { txtarea.value += text; txtarea.focus(); } }
Tout ce code est bien entendu a metre entre le head de la page html avec le ptit tag javascipt qui va bien.

Ensuite faut metre un lien correcte pour que cela fonction
voici le lien type :
Code:

1 2 3 <a href="javascript:emoticon('{CODE1}')"> <img src="forum\images\smiles/{LIEN1}" title="{TITLE1}" width="16" height="16" border="0"> </a>
il faut remplacer les variables entre {} par vos valeurs et voila ca fonctionne nikel le curseur se remet a la suite de votre texte la page je sais meme pas si elle se rafraichis en tout cas ca se voit pas et c'est top

voila j'espere en avoir aidé plus d'un comme ca.

13/06/2006, 00h55
zulot

me revoila avec mes petits problèmes de smiley. :lol:

Bon j'ai reussis a faire dans un textarea mais maintenant je voudrais pouvoir inserer un mon smiley a l'endroit du curseur mais le curseur peut se trouver dans 2 textarea different.

C'est possible?
14/06/2006, 21h48
zulot

UP

c'esdt pas possible d'avoir une barre de smiley pour 2 textarea different sur une meme page?
14/06/2006, 22h28
Eric Berger
Le problème, c'est que quand tu cliques sur ton smiley, le curseur (ou pour utiliser le bon vocabulaire, le focus) n'est plus dans un textarea, mais sur ton smiley...
Pour contourner ceci, tu pourrais mettre à jour une variable à chaque fois que le focus arrive dans l'un de tes textarea:
Code:

1 2 var dernierFocus; <textarea onfocus="dernierFocus = this;"></textarea>
Ensuite, à la place d'envoyer le code du smiley à un textarea particulier, tu l'envoies vers ta variable dernierFocus qui référence le dernier textarea visité.

[edit]La définition de ta variable dernierFocus doit évidemment se trouver dans une zone de script[/edit]
15/06/2006, 10h36
zulot

oki merci je vais testé ca.

Sinon pour la definition de variable tu parles bien de var dernierforus, qui doit etre dans la zone de javascript c'est ca?

Ensuite le probleme dans le onfocus ne risque t il pas de pas savoir dans quel form il se trouve le focus?

Et si les textarea on le meme nom ca risque de pas fonctionner je pense.
15/06/2006, 13h38
Eric Berger

Citation:

Envoyé par zulot

Sinon pour la definition de variable tu parles bien de var dernierforus, qui doit etre dans la zone de javascript c'est ca?

Oui, une variable javaScript se définit dans un script javaScript ;)

Citation:

Envoyé par zulot

Ensuite le probleme dans le onfocus ne risque t il pas de pas savoir dans quel form il se trouve le focus?

Aucun risque, c'est l'objet qui nous intéresse, tu pourrais aussi pointer sur un textarea qui n'appartiendrai à aucun formulaire (même si dans l'absolu on ne devrait pas faire ça).

Citation:

Envoyé par zulot

Et si les textarea on le meme nom ca risque de pas fonctionner je pense.

Si si, ça devrait tout de même marcher, vu que l'objet est localisé à l'aide de this et pas à l'aide de son nom.

Ouais j'ai eu beau essayer mais j'y arrive pas a focus le curseur ca me met meme plus les smiley quand je clique.

voila fonction

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function emoticon(text) {  
   var txtarea;
   text = ' ' + text + ' ';
   if (txtarea.createTextRange && txtarea.caretPos) {  
      var caretPos = txtarea.caretPos;  
      caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
caretPos.text + text + ' ' : caretPos.text + text;  
      txtarea.focus();  
   } else {  
      txtarea.value  += text;  
      txtarea.focus();  
   } 
 
}

Le hic c'est que je sais pas comment passer en parametre le focus

Code:

<textarea onfocus="dernierFocus = this;"></textarea>

dans ma fonction pour que txtarea prenne le dernier focus.

Puisque quand je clique sur le smiley ca appel juste emoticon($icone):aie:
comment faire passer le dernier focus en paramètre???????

est ce que ca serait valide :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
var dernierfocus; // prend le onfocus
 
function emoticon(text,dernierfocus) {  
   var txtarea=dernierfocus;
   text = ' ' + text + ' ';
   if (txtarea.createTextRange && txtarea.caretPos) {  
      var caretPos = txtarea.caretPos;  
      caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ?
caretPos.text + text + ' ' : caretPos.text + text;  
      txtarea.focus();  
   } else {  
      txtarea.value  += text;  
      txtarea.focus();  
   } 
 
}

Bon ca y est j'ay suis arrivé a faire fonctionner pour que le smiley s'affiche dans la derniere zone de texte ou l'ont ecrivait.

Alors comment faire : (beaucoup d'indication on été donnée et là j'ai le code complet.

Tout d'abord dans toutes les zones de textes ou voulez qu'un smiley puisse s'afficher il faut mettre
Code:

1 2 3 4 5 6 7 8 onfocus="dernierFocus = this" exemple input <input type="text" name="tittle" value="{TITTLE}" maxlength="30" onfocus="dernierFocus = this" /> exemple textarea <textarea name="mtexte" cols="50" rows="10" onfocus="dernierFocus = this" >{MTEXTE}</textarea>
Ensuite il faut que dans la zone de début de votre page ou il y a les zones de texte déclarer une varaiable
Code:

1 2 var dernierFocus;
Puis il faut reprendre le code source des forums phpbb et le modifier.
Voici le code modifié :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function emoticon(text) { var txtarea = dernierFocus; text = ' ' + text + ' '; if (txtarea.createTextRange && txtarea.caretPos) { var caretPos = txtarea.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? caretPos.text + text + ' ' : caretPos.text + text; txtarea.focus(); } else { txtarea.value += text; txtarea.focus(); } }
Puis il reste la touche finale le smiley cliquable code a insérer dans le code html pour chaque smiley
Code:

1 2 3 <a href="javascript:emoticon(':-)')"><img src="chemin_smiely/nom_smiley.extension" title="lol" border="0"></a>
voila bon site

18/06/2006, 12h03
Eric Berger

Merci pour les explication zulot....
Il te reste plus qu'à mettre le tag [résolu];)
18/06/2006, 20h54
zulot

De rien pour les explications c'est normal.

Si y a des questions la dessus je suis la pour y repondre :lol:

sinon pour le tag resolu je peux pas c'est pas moi qui est lancé le sujet