Discussion :

[cybertaf]

Bonjour tout le monde,

Alors voilà, j'ai une page avec plusieurs formulaires dans lesquels on peut insérer des émoticones en JS.

Mon script fonctionne s'il n'y a qu'un seul formulaire, mais ne fonctionne plus s'il y en a plusieurs.

Voici les codes :

Le JS :

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
 
<script language="JavaScript" type="text/javascript">
function emoticon(text)
{
	var txtarea = document.commentaire.message;
	text = ' ' + text + ' ';
	 if (txtarea.selectionEnd >= 0 && txtarea.setSelectionRange)
	 { 
		var textLength = txtarea.textLength;
		var selEnd = txtarea.selectionEnd;
		var s1 = (txtarea.value).substring(0, selEnd);
		var s2 = (txtarea.value).substring(selEnd, textLength);
		txtarea.value = s1 + text + s2;
		txtarea.setSelectionRange(selEnd+text.length, selEnd+text.length);
		txtarea.focus();
	}
	else 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();
	}
}
</script>

Le HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<form name="commentaire" method="post">
<div class="form_conteneur">
<div class="form_label">Pseudo</div>
<div class="form_champ"><input type="text" name="pseudo" class="form_balise" /></div>
<div class="form_label">Message</div>
<div class="form_champ"><textarea name="message" class="form_balise" style="height : 200px;"></textarea></div>
</div>

Et la manière dont sont appelées les émoticones :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<a onclick="javascript:emoticon(':lol:')" style="border-bottom-style: none;"><img src="/images/emotic/smile.gif" border="0"></a>
<a onclick="javascript:emoticon(':paslol:')" style="border-bottom-style: none;"><img src="/images/emotic/cry.gif" border="0"></a>
<a onclick="javascript:emoticon(':wink:')" style="border-bottom-style: none;"><img src="/images/emotic/wink.gif" border="0"></a>
 
etc...

J'imagine que le soucis vient d'un conflit de noms de champs de formulaires, mais mes connaissances en JS étant limitées, je ne sais pas comment adapter le script.

Quelqu'un peut m'aider ?

[NoSmoking]

Bonjour,
passes l'objet FORM, ou son ID en paramètre à la fonction

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function emoticon( text, id_form){
  // get l'objet form
  var oForm = document.getElementById( id_form);
  // get la textarea de destination
  var oText = oForm.getElementsByTagName('TEXTAREA')[0];
// la suite du code

Il reste une inconnue c'est l'appel à la fonction, comment ce fait-elle, avec des buttons particuliers pour chaque FORM?

[cybertaf]

Non, ce sont les mêmes boutons pour tous les FORM, ils sont affichés via un script PHP. Je vais peut-être galérer avec ça aussi...

Je vais essayer de me dépatouiller avec ce que tu m'as donné, c'est déjà un début.

Merci beaucoup pour ta réponse en tout cas

[NoSmoking]

dans ce cas il te faut connaître la TEXTAREA en cours, en gérant une variable oTextareaEnCours que tu peux affecter sur le onfocus des TEXTAREA par exemple.

Dans ce cas tu pourrais faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
var oTextareaEnCours = null;
function emoticon( text, id_form){  // le paramètre id_form devient superflus
/*
  // get l'objet form
  var oForm = document.getElementById( id_form);
  // get la textarea de destination
  var oText = oForm.getElementsByTagName('TEXTAREA')[0];
*/
  var oText = oTextareaEnCours;
  if( oText){
    // la suite du code
  }
}

[SpaceFrog]

Adopte une syntaxe plus rigoureuse:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var txtarea = document.commentaire.message;

est une syntaxe laxiste

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var txtarea = document.forms['commentaire'].elements['message'];

permet de cibler le formulaire