textarea vers un span

**radjiv97441** · 31/03/2020, 04h52

Bonjour, je cherche un moyen d'envoyer tout le contenu d'un textarea vers un span pour pouvoir afficher mathjax. En effet les élèves tapent dans le textarea et juste à coté ils verront un affichage avec les symboles mathématiques. Pour cela j'aimerais que les retours à la ligne s'affichent dans le span ainsi que les répétitions d'espace qu'ils ont pu introduire.
J'ai essayé ce genre de code pour voir si je peux déjà copier le contenu exacte avec les retours à la ligne et les répétitions d'espaces mais visiblement cela ne marche pas aussi simplement.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<textarea id="textarea1">
formule 1:       `x^2`
 
 
formule 2:      `x^3`
</textarea>
<p>Aperçu du contenu:</p>
<span id="span1"></span>
<script>
$("#span1").html($("#textarea1").val());
</script>

Voilà l'affichage dans le span sans mathjax:

Code :

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

formule 1: `x^2` formule 2: `x^3`

Merci à ceux qui pourront m'éclairer un peu dans cette tache.

**Watilin** · 31/03/2020, 10h59

Salut,
il te manque juste une petite ligne de CSS :

Code CSS :

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

#span1 { white-space: pre; }

Par défaut, tous les éléments HTML (sauf <pre>) ont le style white-space: normal, c’est la raison pour laquelle ton <span> n’affiche pas fidèlement les espaces et retours à la ligne saisis par tes élèves.
Il y a d’autres valeurs avec des effets différents, consulte le MDN

white-space pour trouver celle qui te convient le mieux