Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript Textarea - innerHTML : Problème de sauts de ligne !

Textarea - innerHTML : Problème de sauts de ligne !

6 réponses
Avatar
Couscous grabIt
Salut tout le monde !

J'ai un TEXTAREA dans mon document, et quand je clique sur mon BOUTON,
je veux faire apparaître le contenu du TEXTAREA dans une DIV :

*************************
<script language="javascript">
function test(){

document.getElementById('confirm_test').innerHTML =
document.getElementById('test').value;
}
</script>

<textarea id="test"></textarea>

<div id="confirm_test"></div>
<input type="button" value="Test" onclick="test()">
*************************

Le code fonctionne bien. Par contre, quand je fais des sauts de ligne
dans mon textarea, le contenu qui apparaît dans ma div... s'affiche sur
une seule ligne :-(
En gros les sauts de ligne ne sont pas pris en compte.
Comment puis-je remédier à ce problème ?

Merci d'avance pour vos réponses.

Couscous grabIt
Signaler un problème avec ce contenu

6 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Florian Sinatra
*Couscous grabIt* @ 14/12/2006 12:13 :
Salut tout le monde !

J'ai un TEXTAREA dans mon document, et quand je clique sur mon BOUTON,
je veux faire apparaître le contenu du TEXTAREA dans une DIV :

Le code fonctionne bien. Par contre, quand je fais des sauts de ligne
dans mon textarea, le contenu qui apparaît dans ma div... s'affiche sur
une seule ligne :-(
En gros les sauts de ligne ne sont pas pris en compte.
Comment puis-je remédier à ce problème ?


Pose-toi la question : qu'est-ce qui crée un saut de ligne dans un texte
en HTML ?
Réponse : un élément <br>. Les "caractères blancs" * sont ignorés.

Ton textarea contient-il des <br> ? Non. Alors c'est normal que ton
<div> n'affiche pas de saut.

Tu me demanderas : mais alors pourquoi le textarea l'affiche ?
Réponse : parce qu'il a la propriété CSS (enfin est rendu comme tel)
white-space: pre;
http://wiki.media-box.net/documentation/css/white-space

=> A ajouter à ton div ;-)

* http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.1

Avatar
Y a personne
Salut tout le monde !

J'ai un TEXTAREA dans mon document, et quand je clique sur mon BOUTON,
je veux faire apparaître le contenu du TEXTAREA dans une DIV :

*************************
<script language="javascript">
function test(){

document.getElementById('confirm_test').innerHTML =
document.getElementById('test').value;
}
</script>

<textarea id="test"></textarea>

<div id="confirm_test"></div>
<input type="button" value="Test" onclick="test()">
*************************

Le code fonctionne bien. Par contre, quand je fais des sauts de ligne
dans mon textarea, le contenu qui apparaît dans ma div... s'affiche sur
une seule ligne :-(
En gros les sauts de ligne ne sont pas pris en compte.
Comment puis-je remédier à ce problème ?

Merci d'avance pour vos réponses.

Couscous grabIt



Il suffit de remplacer les n par des <br>

Avatar
Couscous grabIt
Y a personne nous a pondu :
Salut tout le monde !

J'ai un TEXTAREA dans mon document, et quand je clique sur mon BOUTON,
je veux faire apparaître le contenu du TEXTAREA dans une DIV :

*************************
<script language="javascript">
function test(){

document.getElementById('confirm_test').innerHTML =
document.getElementById('test').value;
}
</script>

<textarea id="test"></textarea>

<div id="confirm_test"></div>
<input type="button" value="Test" onclick="test()">
*************************

Le code fonctionne bien. Par contre, quand je fais des sauts de ligne
dans mon textarea, le contenu qui apparaît dans ma div... s'affiche
sur une seule ligne :-(
En gros les sauts de ligne ne sont pas pris en compte.
Comment puis-je remédier à ce problème ?

Merci d'avance pour vos réponses.

Couscous grabIt



Il suffit de remplacer les n par des <br>



Et comment dois-je faire ce remplacement ?
Je suis nul en JS, desolé. De plus, je n'ai pas trouvé la solution
makgré mes recherches ! :-(

Merci pour votre réponse.


Avatar
Couscous grabIt
Florian Sinatra nous a pondu :
*Couscous grabIt* @ 14/12/2006 12:13 :

Pose-toi la question : qu'est-ce qui crée un saut de ligne dans un texte
en HTML ?
Réponse : un élément <br>. Les "caractères blancs" * sont ignorés.

Ton textarea contient-il des <br> ? Non. Alors c'est normal que ton
<div> n'affiche pas de saut.

Tu me demanderas : mais alors pourquoi le textarea l'affiche ?
Réponse : parce qu'il a la propriété CSS (enfin est rendu comme tel)
white-space: pre;
http://wiki.media-box.net/documentation/css/white-space

=> A ajouter à ton div ;-)

* http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.1


J'ai essayé ce qui est proposé sur le premier lien mais ça ne fonctionne
pas comme je le veux.

Quand j'applique le style white-space: pre, les caractères vont bien à
la ligne à chaque saut de ligne, mais les retour à la ligne automatiques
ne sont pas pris en compte !! :-(
En gros, si j'ai une grande phrase, celle-ci va dépasser de ma div, et
ce n'est bien sûr pas du tout ce que je recherche...

HELP !! :'(

Avatar
ASM
Quand j'applique le style white-space: pre, les caractères vont bien à
la ligne à chaque saut de ligne, mais les retour à la ligne automatiques
ne sont pas pris en compte !! :-(


Bon alors tu ne mets pas cet attribut
et tu donnes une largeur à ton div.

Je n'arrive pas bien à saisir le blème.

En gros, si j'ai une grande phrase, celle-ci va dépasser de ma div, et
ce n'est bien sûr pas du tout ce que je recherche...


Et pour les retours forcés échanger n contre <br>

<script type="text/javascript">
function test(){
document.getElementById('confirm_test').innerHTML =
document.getElementById('test').value.replace(/n/g,'<br>');
}
</script>
<textarea id="test"></textarea>
<input type="button" value="Test" onclick="test()">
<div id="confirm_test" style="width: 300px"></div>


Regular expressions :
http://fr.selfhtml.org/javascript/objets/regexp.htm

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé

Avatar
Couscous grabIt
ASM nous a pondu :

<script type="text/javascript">
function test(){
document.getElementById('confirm_test').innerHTML =
document.getElementById('test').value.replace(/n/g,'<br>');
}
</script>
<textarea id="test"></textarea>
<input type="button" value="Test" onclick="test()">
<div id="confirm_test" style="width: 300px"></div>


Regular expressions :
http://fr.selfhtml.org/javascript/objets/regexp.htm



Niquel, ça marche super bien avec ton expression régulière !
Merci beaucoup !!