Discussion :

[Douzout]

J'ai un formulaire proposant une zone de texte à des utilisateurs.
Les données sont enregistrées en base de données, et il est ensuite possible de consulter le formulaire en vue lecture.

Code :

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

    <TEXTAREA CLASS="valueEditable" ID="_1_1_88_1" NAME="_1_1_88_1" TITLE="Assemblage / Assembly" WRAP="soft" ROWS="3" COLS="100" ONCHANGE="markDirty();">Le contenu écrit par l'utilisateur, peut contenir des retours à la ligne</TEXTAREA>

J'aimerai afficher l'intégralité du contenu écrit par l'utilisateur, en incluant les retours à la ligne.

J'ai la possibilité d'utiliser un tag pour afficher le contenu, mais celui ci n'affiche pas les retours à la ligne, ce qui n'est pas souhaité.

A l'heure actuelle, j'ai trouvé le contournement suivant qui, à l'affichage, me va très bien : écriture mais non-affichage du textarea éditable puis javascript pour afficher le contenu.

Code :

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

1
2
3
4
5
<TEXTAREA STYLE="display:;" CLASS="valueEditable" ID="_1_1_88_1" NAME="_1_1_88_1" TITLE="Assemblage / Assembly" WRAP="soft" ROWS="3" COLS="100" ONCHANGE="markDirty();">[monTag pour affiché le contenu écrit par l'utilisateur]</TEXTAREA>
<br>
<SCRIPT LANGUAGE="JavaScript">
if (document.myForm._1_1_88_1.value != "")    document.write((document.myForm._1_1_88_1.value).replace(/\n/g, "<br>&nbsp;&nbsp;"));
</SCRIPT>

Mais pour d'autres raisons (export jquery du contenu html), je ne souhaite pas faire appel au textarea d'origine, même masqué.

J'ai essayé avec un <DIV> plutôt qu'un textarea, mais je n'ai pas le résultat voulu :

Code :

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

1
2
 
<DIV NAME="_1_1_88_1" TITLE="Assemblage / Assembly">[monTag]</DIV>

M'affiche effectivement l'intégralité du contenu, mais sans aucun retour à la ligne

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<DIV NAME="_1_1_88_1" TITLE="Assemblage / Assembly">
<SCRIPT LANGUAGE="JavaScript">
document.write(("[monTag]").replace(/\n/g, "<br>&nbsp;&nbsp;"));
</SCRIPT>
<br>
<DIV NAME="_1_1_88_1" TITLE="Assemblage / Assembly">
<SCRIPT LANGUAGE="JavaScript">
var monassemblage = "[monTag]";
document.write((monassemblage).replace(/\n/g, "<br>&nbsp;&nbsp;"));
</SCRIPT>
</DIV>

Rien ne s'affiche, j'ai un warning en bas de page "Constante chaine non terminée". Le code source indique effectivement une chaine avec des retours à ligne.

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
30
31
32
<br>
<DIV NAME="_1_1_88_1" TITLE="Assemblage / Assembly">
<SCRIPT LANGUAGE="JavaScript"> 
document.write(("ASSEMBLAGE
Deuxième partie zsie iurfhq idgeoirg qegiuh qeiurhg qekrghqepiurgh qeikgh qihg qomeirujg qpoigqoier gqqeiourh eiur gh
Troisième partie
4
smqdifj
msqliidjfoiqhf
oqspif osjf qoiighhsdfg h
qmiosf 
soidfuqiehg qerugheiurgh qerughipquhgq eoruig qêrçgu
qerôg uqeroiug qeorig ^qoerihg
 qeroig qdh vkqd").replace(/\n/g, "<br>&nbsp;&nbsp;"));
</SCRIPT>
<br>
<DIV NAME="_1_1_88_1" TITLE="Assemblage / Assembly">
<SCRIPT LANGUAGE="JavaScript"> 
var monassemblage = "ASSEMBLAGE
Deuxième partie zsie iurfhq idgeoirg qegiuh qeiurhg qekrghqepiurgh qeikgh qihg qomeirujg qpoigqoier gqqeiourh eiur gh
Troisième partie
4
smqdifj
msqliidjfoiqhf
oqspif osjf qoiighhsdfg h
qmiosf 
soidfuqiehg qerugheiurgh qerughipquhgq eoruig qêrçgu
qerôg uqeroiug qeorig ^qoerihg
 qeroig qdh vkqd";
document.write((monassemblage).replace(/\n/g, "<br>&nbsp;&nbsp;"));
</SCRIPT>
</DIV>

Quelq'un aurait-il une idée pour arriver à afficher le contenu de mon champ textarea en intégralité, en gérant correctement les retours à ligne, et sans afficher le textarea initial ? (et devant fonctionner sous IE 8 )
Merci d'avance pour votre aide

[Difré91]

Essaye ça : http://fr.php.net/nl2br, si tu peux formater ton texte coté serveur.

Sinon, il faut remplacer les \n de ta chaine de caractère par des <br/>.

[Watilin]

Salut,

effectivement, en JS, on ne peut pas mettre de sauts de ligne dans le code source. Ça devrait changer avec ECMAScript 5, mais ce n'est pas pour tout de suite…
Si tu veux conserver la forme actuelle du code source, tu peux échapper les sauts de ligne ainsi :

Code :

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

1
2
var str = 'abc\
def';

Mais en faisant comme ceci, les sauts de ligne ne sont pas interprétés, et la chaîne est équivalente à 'abcdef'. Pour que les sauts de ligne soient interprétés également, il faut rajouter des \n :

Code :

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

1
2
var str = 'abc\n\
def';

Ceci réglera ton problème de "Constante chaine non terminée".

Pour que ta <div> respecte la mise en forme du texte original, pas besoin de transformation côté serveur, il suffit de lui rajouter une règle CSS white-space. La valeur pre-line est supportée à partir de IE8, voir http://www.quirksmode.org/css/whitespace.html.

Code CSS :

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

1
2
3
4
div[name="_1_1_88_1"] {
   white-space: pre; /* pour IE<8 */
   white-space: pre-line;
}

[Douzout]

Bonjour,

Merci pour cette réponse pleine d'espoir Watilin !
Et merci aussi Difré91, mais je voudrais arriver à faire ça côté client

J'ai mis le code CSS suivant (background uniquement pour vérifier la prise en compte...)

Code :

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

1
2
3
4
5
6
 
div.textareacontent {
	white-space: pre; /* pour IE<8 */
	white-space: pre-line;
	background-color:#E7E7E7;
}

J'ai tenté directement

Code :

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

1
2
3
4
<br>
<DIV CLASS="textareacontent" NAME="monDivTextareaTest" TITLE="Assemblage / Assembly">[monTag]</DIV>
<br>
<DIV CLASS="textareacontent" NAME="monDivTextareaTest2" TITLE="Assemblage / Assembly">"[monTag]"</DIV>

Cela s'affiche mais pas de retour à la ligne. Le code source indique :

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
<br>
<DIV CLASS="textareacontent" NAME="monDivTextareaTest" TITLE="Assemblage / Assembly">ASSEMBLAGE
Deuxième partie zsie iurfhq idgeoirg qegiuh qeiurhg qekrghqepiurgh qeikgh qihg qomeirujg qpoigqoier gqqeiourh eiur gh
Troisième partie
4
smqdifj
msqliidjfoiqhf
oqspif osjf qoiighhsdfg h
qmiosf 
soidfuqiehg qerugheiurgh qerughipquhgq eoruig qêrçgu
qerôg uqeroiug qeorig ^qoerihg
 qeroig qdh vkqd</DIV>
<br>
<DIV CLASS="textareacontent" NAME="monDivTextareaTest2" TITLE="Assemblage / Assembly">"ASSEMBLAGE
Deuxième partie zsie iurfhq idgeoirg qegiuh qeiurhg qekrghqepiurgh qeikgh qihg qomeirujg qpoigqoier gqqeiourh eiur gh
Troisième partie
4
smqdifj
msqliidjfoiqhf
oqspif osjf qoiighhsdfg h
qmiosf 
soidfuqiehg qerugheiurgh qerughipquhgq eoruig qêrçgu
qerôg uqeroiug qeorig ^qoerihg
 qeroig qdh vkqd"</DIV>

Est-ce sensé fonctionner simplement comme ça ?
Ca ne fonctionne pas non plus avec un <p>, comme utilisé dans le lien indiqué...


J'ai alors tenté d'intégrer ça à un JS qui remplace les \n par des <br> (comme avec ma solution actuelle), mais j'ai à nouveau une erreur de chaine non terminée dans ce cas là...

Code :

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

<SCRIPT>document.write(('<DIV CLASS="textareacontent" NAME="monDivTextareaTest3" TITLE="Assemblage / Assembly">'+ ("[LL_FormTag_1_1_88_1 /]").replace(/\n/g, "<br>&nbsp;&nbsp;") + '</DIV>';</SCRIPT>

J'espère que ce que je souhaite est faisable, ça ne me semble pas si inhabituel qu'un champ en base de donnée contienne des retours chariots et qu'on ne puisse pas les afficher correctement

[Douzout]

Bonjour,

Un petit message avant de clore cette discussion.
J'ai en effet opté pour une suppression des <textarea> indésirables non pas à l'affichage, mais au moment de l'envoi du contenu html (que je signalais dans mon premier message. Pour information, solution ici
http://www.developpez.net/forums/d12...u-html-filtre/ )

Merci beaucoup pour votre temps et votre aide