web-dev-qa-db-fra.com

Comment ajouter des sauts de ligne à une zone de texte HTML?

J'édite un <textarea> avec JavaScript. Le problème est que lorsque je fais des sauts de ligne, ils ne s'affichent pas. Comment puis-je faire ceci?

Je reçois la valeur pour écrire une fonction, mais elle ne donnera pas de sauts de ligne.

javascripthtmltextarealine-breaks
149
djairo

Le problème vient du fait que les sauts de ligne (\n\r?) Ne sont pas identiques aux balises HTML <br/>.

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');
256
TStamper

si vous utilisez le script général Java et que vous devez affecter une chaîne à la valeur de la zone de texte,

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

vous devez remplacer \n ou < br > par \\\n

sinon, cela donne Uncaught SyntaxError: Unexpected token ILLEGAL sur tous les navigateurs.

24
jit

Vous devez utiliser \n pour linebreaks à l'intérieur de textarea

14
strubester

Peut-être que quelqu'un trouve cela utile:

J'ai eu un problème avec les sauts de ligne qui étaient passés de variable serveur à variable javascript, puis javascript les écrivait dans textarea (en utilisant des liaisons de valeur knockout.js).

la solution était double échappant à de nouvelles lignes:

orginal.Replace("\r\n", "\\r\\n")

côté serveur, javascript n’a pas été analysé avec un seul caractère d’échappement.

13
0lukasz0

Une nouvelle ligne est simplement un espace pour le navigateur et ne sera pas traitée différemment d’un espace normal (""). Pour obtenir une nouvelle ligne, vous devez insérer des éléments <BR />.

Une autre tentative pour résoudre le problème: saisissez le texte dans la zone de texte, puis ajoutez du code JavaScript derrière un bouton pour convertir les caractères invisibles en quelque chose de lisible et dump le résultat en un fichier DIV. Cela vous dira ce que veut votre navigateur.

3
Aaron Digulla

Si vous souhaitez afficher du texte dans votre propre page, vous pouvez utiliser la balise <pre>.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre>
The
new line will
be respected
</pre>
3
Cristian Traìna

J'ai un textarea avec id est # infoartist suivre:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

En code javascript, j'obtiendrai la valeur de textarea et remplacerai la nouvelle ligne d'échappement (\ n\r) par la balise <br />, telle que:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Donc si vous utilisez jquery (comme moi):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

J'espère que cela vous a aidé. :-)

2
NgaNguyenDuy

voici ce que j'ai fait pour les mêmes problèmes que moi.

quand je passe le texte à la page suivante dans jsp, je le lis en tant que textarea au lieu de lire quelque chose comme

la sortie est donc venue comme vous le souhaitiez. et pour d'autres propriétés, vous pouvez utiliser comme ci-dessous.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>
0
raja777m

Si vous avez juste besoin d’envoyer la valeur de la zone de test au serveur avec des sauts de ligne, utilisez nl2br

0
Igor L.