Ecrire le contenu d'un textarea modifier avec du javascript

22 nov. 2006, 13:53

Voila!! on s'est enfin compris. Bon quelque truc a redire

le script que tu m'a donner est un texte qu'on rentre dans un textarea,input. Moi ce que je voudrai c'est que ce ne soit pas dans un input. Soit au lien de ca :

         <input type="text" id="msg" name="msg" onkeyup="previsualiser();"></textarea><br />

Un truc du genre

car mon texte n'est pas a ecrire par l'utilisateur mais est integrer dans le code de la page)

        <div  id="msg" name="msg" onkeyup="previsualiser();"></div><br />

Mais cela ne marche pas d'ailleur j'ai pas compris pourquoi vous fermer un textarea.

Autre hose, dans l'exemple que je vus ai montrer je l'ai simplifier :
Si je veut une transformation avec un autre bbcode par exemple comme ceci :

Code : Tout sélectionner

// balise Gras
        t=deblaie(/(\[\/gras\])/g,t)
        t=remplace_tag(/\[gras\](.+)\[\/gras\]/g,'<b>$1</b>',t)
        t=remblaie(t)
// balise Souligne
		t=deblaie(/(\[\/souligne\])/g,t)
		t=remplace_tag(/\[souligne\](.+)\[\/souligne\]/g,'<u>$1</u>',t)
		t=remblaie(t)

Ou dois-je le mettre??

22 nov. 2006, 14:34

La fermeture de la balise textarea est un oubli, tu peux la virer purement et simplement

22 nov. 2006, 14:37

Et pour le reste?

22 nov. 2006, 14:38

Le reste, tu mets ça dans une fonction que tu appelles éventuellement depuis la première qui affiche l'aperçu.

22 nov. 2006, 14:41

Je n'y connait rien peut tu me reposter ton script avec l'ajout de

// balise Gras
        t=deblaie(/(\[\/gras\])/g,t)
        t=remplace_tag(/\[gras\](.+)\[\/gras\]/g,'<b>$1</b>',t)
        t=remblaie(t)
// balise Souligne
      t=deblaie(/(\[\/souligne\])/g,t)
      t=remplace_tag(/\[souligne\](.+)\[\/souligne\]/g,'<u>$1</u>',t)
      t=remblaie(t)

Et comment mettre le texte dans un div a la place d'un input??

<input type="text" id="msg" name="msg" onkeyup="previsualiser();"></textarea><br />

Un truc du genre

car mon texte n'est pas a ecrire par l'utilisateur mais est integrer dans le code de la page)

<div  id="msg" name="msg" onkeyup="previsualiser();">mon message a afficher en rouge</div><br />

22 nov. 2006, 14:55

Tu te foules pas trop dis donc !

Que tu n'y connaisses rien, ce n'est pas un défaut, mais que tu n'apprennes pas avec les codes que je t'ai montré, c'est plus grave. Et je te signale également que ce type de problème sera le même en PHP.

L'appel de fonction, l'envoi de paramètres à cette fonction, la récupération du retour, tout ceci suit un fonctionnement similaire en JavaScript ou en PHP.

Donc par exemple, en JavaScript :

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<!-- Date de création: 22/11/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<script type="text/javascript">
/* <![CDATA[ */
var chaine = 'Un exemple de texte';
function mafonction1(texte)
{
    var retour = '<p>'+ texte +'<\/p>';
    return retour;
}
function mafonction2(texte)
{
    var retour = mafonction1(texte);
    document.getElementById('cible').innerHTML = retour;
}
/* ]]> */
</script>
</head>
<body>
<div id="cible">&nbsp;</div>
<a href="#" onclick="mafonction2(chaine); return false">Aperçu</a>
</body>
</html>

À toi de jouer maintenant

22 nov. 2006, 15:05

Tu te foules pas trop dis donc !

Ba en fait c'est que j'ai du mal a comprendre. Je te demande de m'indiquer ou on met l'endroit des transformation et je n'ai pas de reponse. Mais parcontre je t'avais dit que je ne voulait pas de lien. Voici un exemple de resultat que je voudrai :

Code : Tout sélectionner

<div id="textamodifier">Bonjour a tous</div>
<div id="zonedetransformation">Bonjour a tous mis ce text a été modifier et souligné</div>

C'etait pas mal ce ci il faudrait juste modifier ce qui est en rouge et m'indiquer ou mettre mon javascript de transformation de bbcode.

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Saisir et pré-visualiser un message</title>
<meta http-equiv="Content-language" content="FR-fr" xml:lang="fr" dir="ltr" />
<style type="text/css">
/* <![CDATA[ */
#page {
    position: absolute;
    top: 0;
    left: 50%;
    width: 600px;
    margin-left: -300px;
}
fieldset {
    border: 3px double #cc9;
}
#msg {
    width: 100%;
    border: 1px solid #000;
}
h2 {
    color: #f00;
    background-color: inherit;
}
/* ]]> */
</style>
<script type="text/javascript">
/* <![CDATA[ */
/* Fonction de transformation des bbCodes */
/* Fonction pour pré-visualiser le message dans la page */
function previsualiser()
{
    /* Récupération des données saisies */
    var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = msg;
   
}
/* fonction pour effacer l'aperçu */
function effacer()
{
    document.getElementById('apercu').innerHTML = '';
}
/*]]> */
</script>
</head>
<body>
  <div id="page">
    <form id="saisiemsg" action="#" method="post">
      <fieldset>
        <[color=red]input[/color] type="text" id="msg" name="msg" [color=red]onkeyup[/color]="previsualiser();"><br />
      </fieldset>
    </form>
    <h2 id="apercu">&nbsp;</h2>
  </div>
</body>
</html>

22 nov. 2006, 16:52

Ben tu vas trouver ça toi-même : tu as les éléments. Réfléchis et suis le déroulement du fonctionnement. Que se passe-t-il lorsque tu inscris un caractère dans la zone de saisie ?

En modifiant le premier code, j'ai oublié d'enlever un commentaire qui est une autre très grosse indication. vas-y étape par étape. Tu poses ton doigt sur une touche, tu relâches la touche, là, ça déclenche l'évènement onkeyup : à partir de là, il se passe quoi ?

22 nov. 2006, 17:07

ba c'est transmit au script qui l'affiche la modification plus bas. Mais moi ce qui m'embete c'est que ce que je voudrai ce n'est pas quand la touche est presser mais ce que contient le div.

22 nov. 2006, 17:30

ba c'est transmit au script qui l'affiche la modification plus bas.

Décompose !!! N'espère même pas que je vais te filer la solution. Je fatigue là, alors tant qu'à fatiguer, qu'au moins tu apprennes quelque chose.

22 nov. 2006, 19:17

bon si je fait ce que tu me dit tu me promet que tu m'aide?

Tu poses ton doigt sur une touche, tu relâches la touche, là, ça déclenche l'évènement onkeyup ensuite qui declenche la fonction previsualiser qui recupere les donée saisie puis qui affiche le message dans l'element qui a pour id=apercu.

Mais mon probleme pour mettre un div seulement a la place d'un input type="text ne marchye pas je n'y arrive pas.

22 nov. 2006, 19:25

Quand je te dis de décomposer, je veux dire que tu dois distinguer chaque action individuelle qui se passe.

Quand tu relâches la touche, tu déclenches l'appel de la fonction avec onfeyup. Jusque là, c'est ok. Ensuite, la fonction en question fait quoi ? elle récupère le contenu de la zone de saisie. Elle en fait quoi ? Elle affiche.
ÇA, c'est cette fonction là :

Code : Tout sélectionner

function previsualiser()
{
    /* Récupération des données saisies */
    var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = msg;
   
}

Mais le problème, c'est que le texte est affiché non transformé : on est bien d'accord ? Donc, logiquement, comment faire pour que ce texte soit transformé entre sa récupération et l'affichage ?

22 nov. 2006, 20:00

ba il faut l'incude dans cette fonction :

function previsualiser()
{
    /* Récupération des données saisies */
// balise Gras
        t=deblaie(/([/gras])/g,t)
        t=remplace_tag(/[gras](.+)[/gras]/g,'<b>$1</b>',t)
        t=remblaie(t)
// balise Souligne
      t=deblaie(/([/souligne])/g,t)
      t=remplace_tag(/[souligne](.+)[/souligne]/g,'<u>$1</u>',t)
      t=remblaie(t)
    var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = msg;

   
}

Est-ce cela??

22 nov. 2006, 20:16

](*,) Je sais pas si tu as une vague idée de ce qu'est la logique. Heureusement que tu programmes pas en Assembleur, je n'ose même pas penser au résultat...

Je fais une dernière tentative, mais je te préviens charitablement, si ça ne marche pas j'abandonne, ce n'est pas une plaisanterie. Te donner un coup de main oui, mais t'apprendre complètement à programmer, simplement programmer tout court, j'ai pas le temps.

D'abord tu parles de "include" : on est en JavaScript, pas en PHP, il n'y a pas d'include.

Ensuite, dans la fonction que tu me montres, où est définie la variable t

Appeler cette fonction telle quelle va retourner une erreur automatique pour cause de variable "undefined".

Tu t'es lancé dans un truc sans même avoir la moindre base en programmation : commence donc par des trucs à ta portée, sinon, tu vas t'écoeurer et accessoirement écoeurer les autres.

22 nov. 2006, 20:42

D'abord tu parles de "include" : on est en JavaScript, pas en PHP, il n'y a pas d'include.

NON! Je ne parle pas d'include php, je parle d'include dans le language courant et je me suis tromper en tapant mon texte car je voulait mettre inclure. Relit la phrase et tu verra qu'avec inclure c'est ce que je vouliat dire.

Bon tu as raison il faut identifier la variable t mais je pense que c'est une erreur ne vaut-t-il pas mieu mettre msg car dans le script que tu as fait c'est a parir de msg que c'est transformer :

var msg = document.forms['saisiemsg'].elements['msg'].value;

Le deuxieme souligné doit correspondre au css.

On va commencer par la modification des bbcode, ensuite on s'occuera de changer le input par un div, puis on s'occupera des retours a la ligne et enfin de l'affichage correcte du script.

Donc pour le bbcode je pense que cela doit etre quelque chose comme cela :

function previsualiser()
{
    /* Récupération des données saisies */
// balise Gras
        msg=deblaie(/([/gras])/g,msg)
       msg=remplace_tag(/[gras](.+)[/gras]/g,'<b>$1</b>',msg)
        msg=remblaie(msg)
// balise Souligne
      msg=deblaie(/([/souligne])/g,msg)
     msg=remplace_tag(/[souligne](.+)[/souligne]/g,'<u>$1</u>',msg)
      msg=remblaie(msg
   var msg = document.forms['saisiemsg'].elements['msg'].value;
    /* Affichage du message saisi dans un bloc de la page */
    document.getElementById('apercu').innerHTML = msg;

   
}

Je ne comprend pas bien cette ligne :

 var msg = document.forms['saisiemsg'].elements['msg'].value;

Je vais faire comme tu ma dit et traduir en francais :

on etablie la variable msg qui correspond au contenu de form avec comme id saisiemsg e ton y ajouter element qui correspona au css msg. Je pense que cette ligne doit etre placer avant les modification du bbcode car la variable doit etre initialise avant.

Alors après que doit-je faire? Mon code est-il correct si l'on place la ligne avant??

Ecrire le contenu d'un textarea modifier avec du javascript

Qui est en ligne