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


Réponses:


265

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

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

METTRE À JOUR

Étant donné que de nombreux commentaires et ma propre expérience m'ont montré que cette <br> solution ne fonctionne pas comme prévu, voici un exemple de la façon d'ajouter une nouvelle ligne à une textareautilisation de '\ r \ n'

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

J'ai décidé de faire une modification, et non comme une nouvelle question car c'est une réponse beaucoup trop populaire pour être fausse ou incomplète.


7
Cela fonctionne aussi pour moi. Dans jQuery, vous pouvez faire quelque chose comme ceci: $ ('# caption'). Html ($ ('# caption'). Text (). Replace (/ \ n \ r? / G, '<br />')) ;
DavGarcia

2
Le saut de ligne Regexp devrait être /(\r\n|\n|\r)/gm textfixer.com/tutorials/javascript-line-breaks.php
tothemario

3
La bonne regex est /\r\n?|\n/gsans capture, sans multiligne.
aMarCruz

5
Le suspect a <br>tort. Pour un saut de ligne universel dans une zone de texte souhaitée \r\n. Par exemple, UC Browser ignore <br> et \ n dans les zones de texte. Voir Ajouter un saut de ligne dans une zone de texte HTML .
Bob Stein

2
L'utilisation de <br> à l'intérieur d'une zone de texte ne fonctionne pas. Du moins pas dans Chrome, où j'ai testé. L'utilisation de \ n semble cependant fonctionner. Utilisez <br> si vous avez l'intention d'insérer le texte en html pur, c'est-à-dire en dehors de tout élément d'entrée.
Snorvarg

24

si vous utilisez un script java général et que vous devez attribuer une chaîne à la valeur de la zone de texte, alors

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

vous devez remplacer \nou < br >à\\\n

sinon ça donne Uncaught SyntaxError: Unexpected token ILLEGALsur tous les navigateurs.


18

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

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

la solution était de doubler les nouvelles lignes:

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

côté serveur, car avec un seul caractère d'échappement, javascript n'était pas analysé.


l'utilisation de "\\ n" fonctionne pour moi sous Windows et je suppose que cela fonctionnera bien dans les systèmes Linux.
Samih A


6

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

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});
<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>


3

Une nouvelle ligne est juste 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 <BR />éléments.

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


3

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

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

Dans le code javascript, j'obtiendrai la valeur de textarea et remplacerai la nouvelle ligne d'échappement (\ n \ r) par une <br />balise, 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é. :-)


0

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


0

voici ce que j'ai fait pour le même problème que j'ai eu.

quand je passe le texte à la page suivante dans jsp, je le lis comme une zone de texte au lieu de lire quelque chose comme

donc la sortie est venue comme vous le vouliez. 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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.