Nouvelle ligne dans la zone de texte

<textarea cols='60' rows='8'>This is my statement one.n This is my statement2</textarea>

<textarea cols='60' rows='8'>This is my statement one.<br/> This is my statement2</textarea>

J'ai essayé les deux mais la nouvelle ligne ne reflète pas lors du rendu du fichier html. Comment puis-je le faire?

221
demandé sur jlafay 2011-12-25 06:12:45

11 réponses

Essayez celui-ci:

    <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>

&#10; Le Saut de ligne et le retour chariot &#13; sont des entités HTML wikipedia. De cette façon, vous analysez réellement la nouvelle ligne ("\n") plutôt que de l'afficher sous forme de texte.

419
répondu Bakudan 2018-08-21 05:18:41
<textarea cols='60' rows='8'>This is my statement one.

This is my statement2</textarea>

Fiddle montrant que cela fonctionne: http://jsfiddle.net/trott/5vu28/.

Si vous voulez vraiment que ce soit sur une seule ligne dans le fichier source, vous pouvez insérer les références de caractères HTML pour un saut de ligne et un retour chariot comme indiqué dans la réponse de @ Bakudan:

  <textarea cols='60' rows='8'>This is my statement one.&#13;&#10;This is my statement2</textarea>
23
répondu Trott 2018-08-21 07:58:24

J'ai trouvé String.fromCharCode(13, 10) utile lors de l'utilisation des moteurs de vue. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Cela crée une chaîne avec les caractères de retour à la ligne réels et force donc le moteur de vue à afficher un retour à la ligne plutôt qu'une version échappée. Par exemple: en utilisant NodeJS ejs View engine-C'est un exemple simple dans lequel tout \n devrait être remplacé:

ViewHelper.js

exports.replaceNewline = function(input) {
    var newline = String.fromCharCode(13, 10);
    return input.replaceAll('\\n', newline);
}

EJS

<textarea><%- viewHelper.replaceNewline("Blah\nblah\nblah") %></textarea>

Rend

<textarea>Blah
blah
blah</textarea>

ReplaceAll:

String.prototype.replaceAll = function (find, replace) {
    var result = this;
    do {
        var split = result.split(find);
        result = split.join(replace);
    } while (split.length > 1);
    return result;
};
19
répondu Daniel Flippance 2015-01-23 09:14:38

Essayez ceci.. ça marche:

<textarea id="test" cols='60' rows='8'>This is my statement one.&#10;This is my statement2</textarea>

Remplacement des balises
:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));
7
répondu Salt Hareket 2011-12-25 02:18:41

Pour obtenir une nouvelle ligne dans la zone de texte, placez un saut de ligne réel:

    <textarea cols='60' rows='8'>This is my statement one.
    This is my statement2</textarea>
7
répondu Jukka K. Korpela 2018-08-21 07:57:38

Je pense que vous confondez la syntaxe des différentes langues.

  • &#10; est (la valeur HtmlEncoded de ASCII 10 ou) le caractère littéral de saut de ligne dans une chaîne HTML . Il nePas rend comme un saut de ligne en HTML (voir les notes en bas).

  • \n est le littéral de caractère de saut de ligne (ASCII 10) dans une chaîne Javascript .

  • <br/> est un saut de ligne en HTML. De nombreux autres éléments, par exemple <p>, <div>, etc aussi render les sauts de ligne à moins qu'ils ne soient remplacés par certains styles.

Espérons que l'illustration suivante {[36] la rendra plus claire:

T.innerText = "Position of LF: " + t.value.indexOf("\n");

p1.innerHTML = t.value;
p2.innerHTML = t.value.replace("\n", "<br/>");
p3.innerText = t.value.replace("\n", "<br/>");
<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='T'></p>
<p id='p1'></p>
<p id='p2'></p>
<p id='p3'></p>

Quelques points à noter sur Html:

  • la valeur innderHTML de l'élément TEXTAREA ne rend pas Html. Essayez ce qui suit: <textarea>A <a href='x'>link</a>.</textarea> pour voir.
  • L'élément P rend tous les espaces blancs contigus (y compris les nouvelles lignes) en un seul espace.
  • le caractère LF ne rend pas nouvelle ligne ou saut de ligne en HTML.
  • le TEXTAREA rend LF comme une nouvelle ligne à l'intérieur de la zone de texte.
7
répondu Old Geezer 2018-10-03 02:31:39

Vous pouvez utiliser \n au lieu de /n.

4
répondu Zar 2011-12-25 02:13:44

Après beaucoup de tests, le code suivant fonctionne pour moi dans Typescreipt

 export function ReplaceNewline(input: string) {
    var newline = String.fromCharCode(13, 10);
    return ReplaceAll(input, "<br>", newline.toString());
}
export function ReplaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}
2
répondu Ali 2016-08-17 13:45:12

Si vous parlez d'utiliser la valeur de la zone de texte ailleurs sur votre page et de rendre les nouvelles lignes, j'ai trouvé le propperty css blanc-espace: pré-wrap; fonctionne très bien, et c'est une solution simple. Peut-être que cela aide quelqu'un.

0
répondu Ásgeir Frímannsson 2018-01-18 13:11:47

Ma fonction .replace() utilisant les modèles décrits sur les autres réponses n'a pas fonctionné. Le modèle qui a fonctionné pour mon cas était:

var str = "Test\n\n\Test\n\Test";
str.replace(/\r\n|\r|\n/g,'&#13;&#10;');

// str: "Test&#13;&#10;&#13;&#10;Test&#13;&#10;Test"
0
répondu Brunno Vodola Martins 2018-02-27 16:23:58

T. innerText = "Position de LF:" + T. valeur.indexOf("\n");

p3.innerText = t.value.replace("\n", "");

<textarea id="t">Line 1&#10;Line 2</textarea>

<p id='p3'></p>
0
répondu Naresh kumar 2018-07-10 06:54:20