Réponses:
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 textarea
utilisation 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.
/(\r\n|\n|\r)/gm
textfixer.com/tutorials/javascript-line-breaks.php
/\r\n?|\n/g
sans capture, sans multiligne.
<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 .
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 \n
ou < br >
à\\\n
sinon ça donne Uncaught SyntaxError: Unexpected token ILLEGAL
sur 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 \n
pour l' linebreaks
inté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é. :-)
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>
<pre></pre>
solutions exposées ici: codepen.io/a-guerrero/pen/grgVBo