[js] apercu en direct.

Sujet résolu

27 août 2006 à 2:35:38

Bonjour,
je debute en javascript et je rencontre quelques problemes. en ce moment j'essai de faire un apercu d'une textarea sans bbcode ni rien, j'ai fait quelque chose qui ne vas pas car a mon grand regret le js n'est aps comme le php, tt la page se recharge pour un script de js.
donc pouvez vous m'aider a faire un script tres simplifié pour un apercu en direct.
coila ce que j'ai fait.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>

<body onload="modif(form)">
<form name="form1">
<textarea name="texte" onkeyup="modif(form)"></textarea>
</form>
<div class="div" style="border:1px solid black; padding:30px; margin:auto; width:500px;">
<script language="javascript">
function modif(form){
var essai=document.form1.texte.value
document.write(essai);
}
</script>
</div>
</body>
</html>

the angel

27 août 2006 à 18:02:50

Bon tu m'excuseras j'ai fait ça rapidement d'après mon code de "Zcode" donc il y as peut-être des choses inutiles, id ou autres ou des fonctions JS dispensables pour un si petit script mais c'est une base, comme ça sa te force à tout revoir et remettre à ta convenance.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple prévisualisation en JS</title>
<script type="text/javascript">
// <![CDATA[
/*
Fonction appeler lors de l'ajout de lettre dans le textarea
Arguments: - id_textarea -> Contient l'id du textarea dans lequel on tape le texte
- id_div_prev -> Contient l'id du div dans lequel est affiché la prévisualisation en temps réel
- id_box_prev -> Contient l'id de la checkbox permettant l'affichage ou non du div de prévisualisation
*/
function pre_parse(id_textarea, id_div_prev, id_box_prev)
{
if (document.getElementById(id_box_prev).checked)
{
var compteur = 0;
clearTimeout(compteur);
compteur = setTimeout("pparse('" + id_textarea + "', '" + id_div_prev + "')", 100);

}
}

/*
Fonction appeler lors de l'ajout de lettre dans le textarea par l'intermédiaire de la fonction pre_parse
Arguments: - id_textarea -> Contient l'id du textarea dans lequel on tape le texte
- id_div_prev -> Contient l'id du div dans lequel est affiché la prévisualisation en temps réel
*/
function pparse(id_textarea, id_div_prev)
{
var textarea = document.getElementById(id_textarea);
var div_prev = document.getElementById(id_div_prev);
var texte = textarea.value;

texte = str_replace("\n", '<br />', texte);

div_prev.innerHTML = texte + '<a href="#" id="ancre"></a>';
if (document.getElementById('ancre') )
document.getElementById('ancre').focus();
textarea.focus();
}

/*
Fonction appeler pour remplacer une chaîne par une autre
Arguments: - string_needle -> Chaîne cherchée
- string_replace -> Caîne de remplacement
- string_haystack -> Chaîne de référence (dans laquelle on recherche et remplace)
*/
function str_replace(string_needle, string_replace, string_haystack)
{
while (string_haystack.indexOf(string_needle) > -1) //Tant que l'on trouve le caractère ou la chaîne de caractère à remplacer, on utilise strictement supérieur à moins 1 au lieu de supérieur ou égal à 0 pour une question de rapidité (tout du moins en php, du coup

)
{
string_haystack = string_haystack.substring(0, string_haystack.indexOf(string_needle)) + string_replace + string_haystack.substring ((string_haystack.indexOf(string_needle) + string_needle.length), string_haystack.length);
}
return string_haystack;
}
// ]]>
</script>

<style type="text/css">
div#prev_text
{
border: 1px solid black;
padding: 5px 5px 5px 5px;
width: 814px;
height: 250px;
overflow: auto;
}
</style>
</head>
<body>
<form method="post" action="index.php">
<div>
<input type="checkbox" id="prev_box" name="prev_box" checked="checked" onClick="hidden('prev_text');" />
<label for="prev_box">Aperçus en temps réel</label>
<br />
<textarea id="mess" name="mess" rows="8" cols="100" onClick="pre_parse(this.id, 'prev_text', 'prev_box');" onKeyUp="pre_parse(this.id, 'prev_text', 'prev_box');" tabindex="10"></textarea>
</div>

<div id="prev_text"></div>

<p>
<input type="submit" value="Valider" tabindex="30" />
</p>
</form>
</body>
</html>

Au revoir.

roxtar

29 août 2006 à 21:03:10

merci beacoup mais c'est un peu long on peut pas faire encor plus court?

Tudor-QVD

29 août 2006 à 21:13:30

Par rapport à ton message initial, tu ne peux pas appeler document.write après la fin du chargement de ta page.
Comme la page est déjà écrite, il ne sait pas où rajouter ce texte, alors il efface la page précédente.

Au lieu de document.write, il faut que tu sélectionne un élément de ta page puis que tu modifie son contenu pour afficher le contenu du textarea.
Par exemple avec document.getElementById('');

document.getElementById('conteneur').innerHTML = document.form1.texte.value;

Voilà un tutoriel qui explique comment modifier le contenu d'une page

roxtar

29 août 2006 à 21:19:28

je suis en train de parcourir ce tuto, j'ai deilleur unn probleme avec ici:
http://www.siteduzero.com/forum-83-70111-p1-dhtml-probleme-avec-un-tuto.html
et le mot 'conteneur' correspond a quoi?
en tout cas merci de ta reponse

Tudor-QVD

29 août 2006 à 21:24:17

Aie oups, oublié de finir mon explication dsl :-.

conteneur, c'est la valeur de id d'un élément de ta page (un div par exemple):

<div id="conteneur">L'aperçu apparaitra ici !!</div>

roxtar

29 août 2006 à 21:26:23

merciiiiiiiiiiiiiiiiiiiii! sa marche nikel!
je vais as dire que je t'aime car ce serait deplacer mais en tout cas merci beacoup
voila au final ce que sa done chez moi:

function affich(form)
{
document.getElementById('conteneur').innerHTML=document.form.texte.value;
}

</script>
<form name="form">
<p align="center"><textarea name="texte" id="essai" cols="100%" rows="15" onkeyup="affich(form)"></textarea></p>
<p align="center"><input type="submit" onclick="alert(document.form.texte.value)" /></p>
</form>
<div id="conteneur" style="border:1px solid black; padding:30px; margin:auto; width:500px;">
</div>