Partage
  • Partager sur Facebook
  • Partager sur Twitter

[JS] Aperçu en temps réel de la saisie

comme sur le sdz

Age
  • Javascript
    6 novembre 2008 à 23:09:48

    Bonsoir à tous et à toute.

    Il y a quelques mois, j'avais trouvé un tutoriel qui permettait de faire un aperçu en temps réel de ce qu'on saisi dans un textarea.

    Le problème, c'est que j'ai beau cherché partout, je ne le retrouve pas.
    Si quelqu'un a le lien de ce tuto ou un autre lien permettant à une personne ne connaissant rien au JS de mettre ce système sur un site web, je suis preneur.

    Merci d'avance et bonne continuation,
    Age
    • Partager sur Facebook
    • Partager sur Twitter
    Age
    • Javascript
    Johnny Behague
    • Javascript
      7 novembre 2008 à 18:35:58

      J'avais vu ce type d'aperçu sur un tutoriel, le tutoriel concernant un script de newsletter je crois, et c'est celui qui n'est plus là. Il était combiné au BBCode.

      Tu appelle le fichier prev.js
      <script language="javascript" type="text/javascript" src="prev.js"></script>


      fichier prev.js

      var timer=0;
var ptag=String.fromCharCode(5,6,7);
function  previsualisation() {
t=document.formulaire.textarea.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev").innerHTML=t
if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)
<!-- le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s) -->
}
function automatique() {
if (document.formulaire.auto.checked) previsualisation() <!-- si on a coché la case d'aperçu automatique -->

<!-- tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP -->
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}


      Et dans ton formulaire tu peux mettre une case a cocher pour afficher la prévisualisation:

      <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /><!-- ce bouton va permettre aux utilisateurs d'avoir un aperçu quand ils le veulent, pas en direct -->
		<div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 75%;" align="left" id="prev"></div>
		<!-- on crée un div avec quelques caractéristiques, on lui donne un nom et on ne le remplit pas, on le laisse vide -->


      C'est dommage que ce tutoriel n'est plus là, en plus j'aime pas faire du plagiat comme ça ^^ Mais bon... J'ai retiré tout ce qui était bbcode, j'espère que ce code fonctionne (d'ailleurs j'ai vu des problèmes d'apostrophes dans le fichier js)
      • Partager sur Facebook
      • Partager sur Twitter
      Age
      • Javascript
        7 novembre 2008 à 21:04:30

        C'est exactement ce code là que j'avais trouvé sur le tuto qui, malheureusement n'est plus référencé sur le sdz.

        Par contre, pour le bbcode, ça se passe comment ?
        • Partager sur Facebook
        • Partager sur Twitter
        Age
        • Javascript
        Johnny Behague
        • Javascript
          8 novembre 2008 à 11:34:13

          Désolé,j'suis pas souvent sur le pc en ce moment ^^
          tu veux parler du BBCode au niveau de la prévisualisation ou du script PHP?

          Pour la previsualisation, tu dois rajouter cette fonction dans le fichier prev.js:

          prev.js
          function code_to_html(t) {
t=nl2khol(t)
// balise Gras <!-- on lui dit que telle balise correspond à tel code en HTML -->
t=deblaie(/(\[\/gras\])/g,t)
t=remplace_tag(/\[gras\](.+)\[\/gras\]/g,'<span style="font-weight: bold;">$1</span>',t)
t=remblaie(t)

// balise Italic
t=deblaie(/(\[\/italic\])/g,t)
t=remplace_tag(/\[italic\](.+)\[\/italic\]/g,'<span style="font-style: italic;">$1</span>',t)
t=remblaie(t)

// balise Citation
t=deblaie(/(\[\/citation\])/g,t)
t=remplace_tag(/\[citation=([\s\S]*?)\](.+)\[\/citation\]/g,'<strong>Citation $1 :</strong><div style="border: 1px solid #000000; width: 50%; font-family: Verdana, \'Trebuchet MS\', Tahoma, \'Times New Roman\', Times, serif; text-align: left; font-size: 11px;" align="center">$2</div>',t)
t=remblaie(t)

// balise souligner
t=deblaie(/(\[\/souligner\])/g,t)
t=remplace_tag(/\[souligner\](.+)\[\/souligner\]/g,'<u>$1</u>',t)
t=remblaie(t)


// balise droite
t=deblaie(/(\[\/droite\])/g,t)
t=remplace_tag(/\[droite\](.+)\[\/droite\]/g,'<div style="text-align: right;">$1</div>',t)
t=remblaie(t)

// balise centrer
t=deblaie(/(\[\/centrer\])/g,t)
t=remplace_tag(/\[centrer\](.+)\[\/centrer\]/g,'<center>$1</center>',t)
t=remblaie(t)

// balise image
t=deblaie(/(\[\/image\])/g,t)
t=remplace_tag(/\[image\](.+)\[\/image\]/g,'<img src="$1" alt="" />',t)
t=remblaie(t)


// smilies Smile <!-- on oublie pas les smilies -->
t=remplace_tag(/:D/g,'<img src="http://siteduzero.com/Templates/images/smilies/smile.png" alt="" />',t)
t=remblaie(t)
t=unkhol(t)
t=nl2br(t)
return t
}


          A toi de l'adapter selon ton besoin
          • Partager sur Facebook
          • Partager sur Twitter
          angelus76
          • Javascript
            8 novembre 2008 à 11:50:40

            voicie le mien aussi si sa t'interesse :)

            function PreviewLive(texte){   
var q1 = "<table align=center border=0 cellpadding=3 cellspacing=1 width=90%><tbody><tr><td><div align=\"left\" style=\"font-size : 11px; color: #000000;\"><b>";
var q2 = "</b></div></td></tr><tr><td align=\"left\" style=\"font-family: Arial; font-size: 11px; color: #444444; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px;\">";
var q3 =  "</td></tr></tbody></table>";
var cite1 = "<table align=center border=0 cellpadding=3 cellspacing=1 width=90%><tbody><tr><td><div align=\"left\" style=\"font-size : 11px; color: #000000;\"><b>";
var cite2 = "</b></div></td></tr><tr><td align=\"left\" style=\"font-family: Arial; font-size: 11px; color: #444444; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px;\">";
var cite3 = "</td></tr></tbody></table>";
    //parseur html
	texte=texte.replace(/</g, '&lt;');
	texte=texte.replace(/>/g, '&gt;');
	//parseur smileys
	texte=texte.replace(/\:D/g,'<img src="bbimg/bbcode/smileys/cool.gif">');
	texte=texte.replace(/\[smil=([^\[]*)\]/mig, '<img src="bbimg/bbcode/smileys/$1.gif">');
	//parseur forme
	texte=texte.replace(/\r\n|\r|\n/g, '<br />');
	texte=texte.replace(/\[(li|b|u|s|i|\/li|\/b|\/u|\/s|\/i)]/g,'<$1>');
    //parseur , couleur, font, size	
	texte=texte.replace(/\[color=([^\[]*)\]/mig, '<span style=\'color:$1;\'>');
	texte=texte.replace(/\[font=([^\[]*)\]/mig, '<span style=\'font-family: $1;\'>');
	texte=texte.replace(/\[size=([^\[]*)\]/mig, '<span style=\'font-size:$1;\'>');
	texte=texte.replace(/\[\/(color|font|size)\]/gi,'</span>');
	//parseur placement
	texte=texte.replace(/\[align=([^\[]*)\]/mig, '<div style=\'text-align:$1;\'>');
	texte=texte.replace(/\[\/align]/gi, '</div>');
	//parseur url,mail,img
	texte=texte.replace(/\[url]([^\]]*)\[\/url]/mig,'<a href="$1" target="_blank">$1</a>');
	texte=texte.replace(/\[url=([^\[]*)\]([^\]]*)\[\/url\]/mig, '<a href=\'$1\' target=\'_blank\'>$2</a>');
	texte=texte.replace(/\[mail]([^\[]*)\[\/mail]/mig,'<a href="mailto:$1" target="_blank">$1</a>');
	texte=texte.replace(/\[quote]/gi, q1+'Citation:'+q2);
	texte=texte.replace(/\[quote=([^\[]*)\]/gi, q1+'$1 a dit :'+q2);
	texte=texte.replace(/\[\/quote]/gi, q3);
	texte=texte.replace(/\[mail=([^\[]*)\]([^\]]*)\[\/mail\]/mig, '<a href=\'mailto:$1\' target=\'_blank\'>$2</a>');
	texte=texte.replace(/\[img]([^\]]*)\[\/img]/mig,'<img src="$1" border="0" />');
    texte=texte.replace(/\[cadre=([^\[]*)\]([^\]]*)\[\/cadre\]/mig, '<div style="border:$1 1px; text-align:center; color:#990000;"><h1>$2</h1></div>');
    //parseur Code : php, html, javascript ...
	texte=texte.replace(/\[code=([^\[]*)\]([^\]]*)\[\/code\]/mig, cite1+'Code :$1 '+cite2+'<pre>$2</pre>'+cite3);
	// parseur taille titre , H1 H2
	texte=texte.replace(/\[h=([^\[]*)\]([^\]]*)\[\/h\]/mig, '<h$1>$2</h$1>');
return texte ;
}
            • Partager sur Facebook
            • Partager sur Twitter
            Age
            • Javascript
              9 novembre 2008 à 0:47:05

              Citation : Beowulf59

              J'avais vu ce type d'aperçu sur un tutoriel, le tutoriel concernant un script de newsletter je crois, et c'est celui qui n'est plus là. Il était combiné au BBCode.

              Tu appelle le fichier prev.js

              <script language="javascript" type="text/javascript" src="prev.js"></script>



              fichier prev.js

              var timer=0;
var ptag=String.fromCharCode(5,6,7);
function  previsualisation() {
t=document.formulaire.textarea.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev").innerHTML=t
if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)
<!-- le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s) -->
}
function automatique() {
if (document.formulaire.auto.checked) previsualisation() <!-- si on a coché la case d'aperçu automatique -->

<!-- tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP -->
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}



              Et dans ton formulaire tu peux mettre une case a cocher pour afficher la prévisualisation:

              <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /><!-- ce bouton va permettre aux utilisateurs d'avoir un aperçu quand ils le veulent, pas en direct -->
		<div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 75%;" align="left" id="prev"></div>
		<!-- on crée un div avec quelques caractéristiques, on lui donne un nom et on ne le remplit pas, on le laisse vide -->



              C'est dommage que ce tutoriel n'est plus là, en plus j'aime pas faire du plagiat comme ça ^^ Mais bon... J'ai retiré tout ce qui était bbcode, j'espère que ce code fonctionne (d'ailleurs j'ai vu des problèmes d'apostrophes dans le fichier js)



              J'ai fait exactement ce que tu m'a dit et ça ne fonctionne pas.
              var timer=0;
var ptag=String.fromCharCode(5,6,7);
function  previsualisation() {
t=document.formulaire.textarea.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev").innerHTML=t
if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)
<!-- le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s) -->
}
function automatique() {
if (document.formulaire.auto.checked) previsualisation() <!-- si on a coché la case d'aperçu automatique -->

<!-- tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP -->
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}

              Et le formulaire : 
              <fieldset>
	<legend>Poster une news</legend>
	<form id="verif_code" name="verif_code" method="post" action="index.php?pgadmin=adminnews&action=verifcreenews">
    <table width="100%" border="0">
            <tr>
              <td colspan="2"><div align="left">Titre : 
                  <input name="titre" type="text" id="titre"/> - 
                  <input type="checkbox" name="checkbox" id="checkbox" onClick="automatique()" /> 
                  Prévisualisation automatique
              <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /></div></td>
            </tr>
            <tr>
              <td colspan="2"><div align="left">Catégorie : 
                <select name="categorie" id="categorie">
                	<option selected="selected" value="choisissez">Choisissez une catégorie</option>
                    <?php
					$sql_cat = "SELECT * FROM categories ORDER BY idcat ASC";
					$reponse_cat = mysql_query($sql_cat)or die('<br/><div id="erreur">Erreur SQL 160 : <br />'.$sql_cat.'<br />'.mysql_error().'</div');
					 while($donnees = mysql_fetch_array($reponse_cat))
					 {
					 	echo '<option value='.$donnees['cat'].'>'.$donnees['nomcat'].'</option>';
					 }
					?>
                </select>
              </div></td>
            </tr>
            <tr>
              <td colspan="2">
                <div align="center">
                  <input type="button" name="Submit" value="Gras" onclick="bbcode('[b]', '[/b]')"/>
                  <input type="button" name="Submit2" value="Italique" onclick="bbcode('[i]', '[/i]')"/>
                  <input type="button" name="Submit3" value="Souligner" onclick="bbcode('[u]', '[/u]')"/>
                  <input name="button" type="button" onclick='bbcode("<a href=\"http://\">", "</a>")' value="Lien" />
                  <input type="button" name="button3" id="button2" value="Image" onclick="bbcode('[img]', '[/img]')" />
                  <select name="color" id="color" onchange="bbcode('[color='+ this.options[this.selectedIndex].value +']',
'[/color]'); this.selectedIndex=0;">
                    <option class="opt_titre" selected="selected" disabled="disabled">Couleur</option>
                    <option value="red" style="color:red;">Rouge</option>
                    <option value="blue" style="color:blue;">Bleu</option>
                    <option value="green" style="color:green;">Vert</option>
                    <option value="yellow" style="color:yellow;">Jaune</option>
                    <option value="purple" style="color:purple;">Violet</option>
                    <option value="oilve" style="color:olive;">Vert olive</option>
                  </select>
                    <select name="alignement" id="alignement" onchange="bbcode('['+ this.options[this.selectedIndex].value +']',
'[/'+ this.options[this.selectedIndex].value +']'); this.selectedIndex=0;">
                      <option class="opt_titre" selected="selected" disabled="disabled">Alignement</option>
                      <option value="gauche" style="text-align:left">Gauche</option>
                      <option value="centre" style="text-align:center">Centre</option>
                      <option value="droite" style="text-align:right">Droite</option>
                      <option value="justifie" style="text-align:justify">Justifie</option>
                  </select>
                    <select name="float" id="float" onchange="bbcode('[float='+ this.options[this.selectedIndex].value +']',
'[/float]'); this.selectedIndex=0;">
                      <option class="opt_titre" selected="selected" disabled="disabled">Flotter</option>
                      <option value="gauche" style="text-align:left">Gauche</option>
                      <option value="centre" style="text-align:center">Centre</option>
                      <option value="droite" style="text-align:right">Droite</option>
                      <option value="justifie" style="text-align:justify">Justifie</option>
                  </select>
                </div></td>
            </tr>
            <tr>
         <td width="13%"><table width="123" border="1">
           <tr>
            <td width="26"><div align="center"><img src="../images/emoticones/smile.png" onclick="bbcode(':smile:', '')" /></div></td>
            <td width="37"><div align="center"><img src="../images/emoticones/ange.png" onclick="bbcode(':ange:', '')" /></div></td>
            <td width="38"><div align="center"><img src="../images/emoticones/angry.gif" onclick="bbcode(':angry:', '')" /></div></td>
            
           </tr>
           <tr>
             <td><div align="center"><img src="../images/emoticones/diable.png" onclick="bbcode(':diable:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/heureux.png" onclick="bbcode(':heureux:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/hihi.png" onclick="bbcode(':hihi:', '')" /></div></td>
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/magicien.png" onclick="bbcode(':magicien:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/mechant.png" onclick="bbcode(':mechant:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/ninja.png" onclick="bbcode(':ninja:', '')" /></div></td>
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/rire.gif" onclick="bbcode(':rire:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/rouge.png" onclick="bbcode(':rouge:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/siffle.png" onclick="bbcode(':siffle:', '')" /></div></td>
             
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/unsure.gif" onclick="bbcode(':unsure:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/waw.png" onclick="bbcode(':waw:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/zorro.png" onclick="bbcode(':zorro:', '')" /></div></td>
            </tr>
            <tr>
              <td><div align="center"><img src="../images/emoticones/triste.png" onclick="bbcode(':triste:', '')" /></div></td>
              <td><div align="center"><img src="../images/emoticones/soleil.png" onclick="bbcode(':soleil:', '')" /></div></td>
              <td><div align="center"><img src="../images/emoticones/pinch.png" onclick="bbcode(':pinch:', '')" /></div></td>
              
            </tr>
            <tr>
              <td><div align="center"><img src="../images/emoticones/pirate.png" onclick="bbcode(':pirate:', '')" /></div></td>
               <td><div align="center"><img src="../images/emoticones/huh.png" onclick="bbcode(':huh:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/langue.png" onclick="bbcode(':langue:', '')" /></div></td>
            </tr>
            <tr>
            <td width="26"><div align="center"><img src="../images/emoticones/blink.gif" onclick="bbcode(':blink:', '')" /></div></td>
            <td width="37"><div align="center"><img src="../images/emoticones/clin.png" onclick="bbcode(':clin:', '')" /></div></td>
           </tr>
            </table></td>
              <td width="87%"><textarea name="textarea" cols="70" rows="10" wrap="physical" id="textarea"></textarea></td>
      </tr>
      </table>
      

  <div align="center">
      <input type="submit" name="button2" id="button" value="Envoyer" />
    </div>
    
    </form>
	</fieldset>
    <div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 90%;" align="left" id="prev" name="prev"></div>


              Je ne vois pas ce qui cloche.
              Et comment faire pour que l'aperçu en temps réel soi automatiquement activé dès le chargement de la page ?
              Si vous pouvez m'aider.
              • Partager sur Facebook
              • Partager sur Twitter
              angelus76
              • Javascript
                9 novembre 2008 à 2:43:25

                essaye de remplacer cette ligne ( N°4 )

                Citation

                t=document.formulaire.textarea.value


                par

                Citation

                t=document.verif_code.textarea.value

                • Partager sur Facebook
                • Partager sur Twitter
                Age
                • Javascript
                  9 novembre 2008 à 11:26:31

                  Je viens de faire ce que tu m'a dit.
                  Je l'ai également fait pour la case à cocher et ça ne fonctionne pas.

                  <script language="javascript">
var timer=0;
var ptag=String.fromCharCode(5,6,7);
function  previsualisation() {
t=document.verif_code.textarea.value
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev").innerHTML=t
if (document.verif_code.auto.checked) timer=setTimeout(previsualisation,1)
<!-- le "1" est le temps que met le texte à s'afficher, "1" : le texte s'affichera en même temps que l'on écrit (en s) -->
}
function automatique() {
if (document.verif_code.auto.checked) previsualisation() <!-- si on a coché la case d'aperçu automatique -->

<!-- tout le code qui suit c'est pour transformer toutes les balises, comme les preg_replace en PHP -->
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}
}
</script>
	<fieldset>
	<legend>Poster une news</legend>
	<form id="verif_code" name="verif_code" method="post" action="index.php?pgadmin=adminnews&action=verifcreenews">
    <table width="100%" border="0">
            <tr>
              <td colspan="2"><div align="left">Titre : 
                  <input name="titre" type="text" id="titre"/> - 
                  <input type="checkbox" name="auto" id="auto" onClick="automatique()" /> 
                  Prévisualisation automatique
              <input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" /></div></td>
            </tr>
            <tr>
              <td colspan="2"><div align="left">Catégorie : 
                <select name="categorie" id="categorie">
                	<option selected="selected" value="choisissez">Choisissez une catégorie</option>
                    <?php
					$sql_cat = "SELECT * FROM categories ORDER BY idcat ASC";
					$reponse_cat = mysql_query($sql_cat)or die('<br/><div id="erreur">Erreur SQL 160 : <br />'.$sql_cat.'<br />'.mysql_error().'</div');
					 while($donnees = mysql_fetch_array($reponse_cat))
					 {
					 	echo '<option value='.$donnees['cat'].'>'.$donnees['nomcat'].'</option>';
					 }
					?>
                </select>
              </div></td>
            </tr>
            <tr>
              <td colspan="2">
                <div align="center">
                  <input type="button" name="Submit" value="Gras" onclick="bbcode('[b]', '[/b]')"/>
                  <input type="button" name="Submit2" value="Italique" onclick="bbcode('[i]', '[/i]')"/>
                  <input type="button" name="Submit3" value="Souligner" onclick="bbcode('[u]', '[/u]')"/>
                  <input name="button" type="button" onclick='bbcode("<a href=\"http://\">", "</a>")' value="Lien" />
                  <input type="button" name="button3" id="button2" value="Image" onclick="bbcode('[img]', '[/img]')" />
                  <select name="color" id="color" onchange="bbcode('[color='+ this.options[this.selectedIndex].value +']',
'[/color]'); this.selectedIndex=0;">
                    <option class="opt_titre" selected="selected" disabled="disabled">Couleur</option>
                    <option value="red" style="color:red;">Rouge</option>
                    <option value="blue" style="color:blue;">Bleu</option>
                    <option value="green" style="color:green;">Vert</option>
                    <option value="yellow" style="color:yellow;">Jaune</option>
                    <option value="purple" style="color:purple;">Violet</option>
                    <option value="oilve" style="color:olive;">Vert olive</option>
                  </select>
                    <select name="alignement" id="alignement" onchange="bbcode('['+ this.options[this.selectedIndex].value +']',
'[/'+ this.options[this.selectedIndex].value +']'); this.selectedIndex=0;">
                      <option class="opt_titre" selected="selected" disabled="disabled">Alignement</option>
                      <option value="gauche" style="text-align:left">Gauche</option>
                      <option value="centre" style="text-align:center">Centre</option>
                      <option value="droite" style="text-align:right">Droite</option>
                      <option value="justifie" style="text-align:justify">Justifie</option>
                  </select>
                    <select name="float" id="float" onchange="bbcode('[float='+ this.options[this.selectedIndex].value +']',
'[/float]'); this.selectedIndex=0;">
                      <option class="opt_titre" selected="selected" disabled="disabled">Flotter</option>
                      <option value="gauche" style="text-align:left">Gauche</option>
                      <option value="centre" style="text-align:center">Centre</option>
                      <option value="droite" style="text-align:right">Droite</option>
                      <option value="justifie" style="text-align:justify">Justifie</option>
                  </select>
                </div></td>
            </tr>
            <tr>
         <td width="13%"><table width="123" border="1">
           <tr>
            <td width="26"><div align="center"><img src="../images/emoticones/smile.png" onclick="bbcode(':smile:', '')" /></div></td>
            <td width="37"><div align="center"><img src="../images/emoticones/ange.png" onclick="bbcode(':ange:', '')" /></div></td>
            <td width="38"><div align="center"><img src="../images/emoticones/angry.gif" onclick="bbcode(':angry:', '')" /></div></td>
            
           </tr>
           <tr>
             <td><div align="center"><img src="../images/emoticones/diable.png" onclick="bbcode(':diable:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/heureux.png" onclick="bbcode(':heureux:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/hihi.png" onclick="bbcode(':hihi:', '')" /></div></td>
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/magicien.png" onclick="bbcode(':magicien:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/mechant.png" onclick="bbcode(':mechant:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/ninja.png" onclick="bbcode(':ninja:', '')" /></div></td>
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/rire.gif" onclick="bbcode(':rire:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/rouge.png" onclick="bbcode(':rouge:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/siffle.png" onclick="bbcode(':siffle:', '')" /></div></td>
             
             
            </tr>
            <tr>
             <td><div align="center"><img src="../images/emoticones/unsure.gif" onclick="bbcode(':unsure:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/waw.png" onclick="bbcode(':waw:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/zorro.png" onclick="bbcode(':zorro:', '')" /></div></td>
            </tr>
            <tr>
              <td><div align="center"><img src="../images/emoticones/triste.png" onclick="bbcode(':triste:', '')" /></div></td>
              <td><div align="center"><img src="../images/emoticones/soleil.png" onclick="bbcode(':soleil:', '')" /></div></td>
              <td><div align="center"><img src="../images/emoticones/pinch.png" onclick="bbcode(':pinch:', '')" /></div></td>
              
            </tr>
            <tr>
              <td><div align="center"><img src="../images/emoticones/pirate.png" onclick="bbcode(':pirate:', '')" /></div></td>
               <td><div align="center"><img src="../images/emoticones/huh.png" onclick="bbcode(':huh:', '')" /></div></td>
             <td><div align="center"><img src="../images/emoticones/langue.png" onclick="bbcode(':langue:', '')" /></div></td>
            </tr>
            <tr>
            <td width="26"><div align="center"><img src="../images/emoticones/blink.gif" onclick="bbcode(':blink:', '')" /></div></td>
            <td width="37"><div align="center"><img src="../images/emoticones/clin.png" onclick="bbcode(':clin:', '')" /></div></td>
           </tr>
            </table></td>
              <td width="87%"><textarea name="textarea" cols="70" rows="10" wrap="physical" id="textarea"></textarea></td>
      </tr>
      </table>
      <div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 90%;" align="left" id="prev" name="prev"></div>

  <div align="center">
      <input type="submit" name="button2" id="button" value="Envoyer" />
    </div>
    
    </form>
	</fieldset>
                  • Partager sur Facebook
                  • Partager sur Twitter
                  askerat
                    9 novembre 2008 à 11:40:52

                    Arrange toi avec ton debugger, il te dis quoi ? Il doit forcément te renvoyer des xxxx is not defined, ou xxx is null, ou autre.
                    • Partager sur Facebook
                    • Partager sur Twitter
                    Age
                    • Javascript
                      9 novembre 2008 à 13:50:32

                      Citation : askerat

                      Arrange toi avec ton debugger, il te dis quoi ? Il doit forcément te renvoyer des xxxx is not defined, ou xxx is null, ou autre.


                      La console d'erreur de firefox me signale aucune erreurs ...
                      • Partager sur Facebook
                      • Partager sur Twitter
                      Mulugruntz
                        9 novembre 2008 à 16:03:55

                        Regarde dans l'arbre DOM ce qu'il se passe.
                        Au pire, fait des variables js globales et donne-leur les valeurs de certaines variables locales. Dans l'arbre DOM, tu pourras ainsi voir les valeurs qu'avaient tes locales grace aux globales.

                        Un moyen de débugguer quand la console ne détecte rien d'anormal ...
                        • Partager sur Facebook
                        • Partager sur Twitter
                        Age
                        • Javascript
                          9 novembre 2008 à 17:09:46

                          Je ne connais rien au JS et à tout ce que tu tente de m'expliquer ...
                          • Partager sur Facebook
                          • Partager sur Twitter
                          Age
                          • Javascript
                          Age
                          • Javascript
                          Mulugruntz
                            30 novembre 2008 à 3:45:17

                            Citation : Age


                            La console d'erreur de firefox me signale aucune erreurs ...



                            Firefox ou firebug ?

                            Si le deuxième ne te dit rien, télécharge-le ; c'est un module de firefox très pratique.
                            • Partager sur Facebook
                            • Partager sur Twitter
                            Age
                            • Javascript
                              30 novembre 2008 à 12:00:25

                              Citation : Mulugruntz

                              Citation : Age


                              La console d'erreur de firefox me signale aucune erreurs ...



                              Firefox ou firebug ?

                              Si le deuxième ne te dit rien, télécharge-le ; c'est un module de firefox très pratique.



                              Utile en effet
                              • Partager sur Facebook
                              • Partager sur Twitter

                              [JS] Aperçu en temps réel de la saisie

                              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                              • Editeur ●
                              • Markdown