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

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

J'obtiens la valeur pour écrire une fonction, mais cela ne donnera pas de sauts de ligne.

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.

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.

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é.

Vous devez utiliser \npour l' linebreaksintérieurtextarea

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>

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.

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é. :-)

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

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>