Nouvelle ligne dans la zone de texte


281
<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 se reflète pas lors du rendu du fichier html. Comment puis je faire ça?

Réponses:


524

Essaye celui-là:

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

&#10;Le saut de ligne et le &#13;retour chariot 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.


2
@LittleAlien jsfiddle.net/v0y3xvpx/1 - réponse basée sur la question OP, évidemment le problème a été résolu
Bakudan

2
n'est pas juste &#10;suffisant pour analyser le \n?
Doug

Cela ne dépend-il pas de Windows vs macOS si les caractères de saut de ligne et de retour chariot sont nécessaires, ou même analysés correctement?
SeizeTheDay

1
@SeizeTheDay oui, mais ce n'est pas MacOS - c'est Linux / BSD vs Windows
Bakudan

@Bakudan Oh! Je pensais que macOS, étant basé sur Unix, aurait toujours ce problème. Mais vous avez certainement raison, la différence est plus générale.
SeizeTheDay

28

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

Cela crée une chaîne contenant les caractères de nouvelle ligne réels et force ainsi le moteur de vue à générer une nouvelle ligne plutôt qu'une version d'échappement. Par exemple: Utilisation du moteur de vue NodeJS EJS - Ceci est un exemple simple dans lequel tout \ n doit ê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>

Rendu

<textarea>Blah
blah
blah</textarea>

remplace tout:

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;
};

1
La nouvelle ligne = String.fromCharCode (13, 10); est la seule chose qui a fonctionné pour moi en ajoutant une nouvelle ligne par programme pendant l'exécution. +1 à ce sujet.
Ronen Rabinovici

3
Je voudrais suggérer peut-être un moyen plus simple de tout remplacer: var regExp = new RegExp (find, "gi"); str = str.replace (regExp, replace);
Ronen Rabinovici

2
Je l'ai fait s = s.replace(/\\n/g, String.fromCharCode(13, 10) ). C'est magique cependant. Je vous remercie.
Glycérine

28
<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 cela 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

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

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

  • \nest 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. rendent également les sauts de ligne, sauf s'ils sont remplacés par certains styles.

Espérons que l' illustration suivante le rendra plus clair:

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 le HTML:

  • La innerHTMLvaleur de l' TEXTAREAélément ne rend pas Html. Essayez ce qui suit: <textarea>A <a href='x'>link</a>.</textarea>pour voir.
  • L' Pélément rend tous les espaces blancs contigus (y compris les nouvelles lignes) comme un seul espace.
  • Le caractère LF ne s'affiche pas sur une nouvelle ligne ou un saut de ligne en HTML.
  • Le TEXTAREArendu LF comme une nouvelle ligne à l'intérieur de la zone de zone de texte.

1
À première vue, ce post semble compliqué, mais contient en fait BEAUCOUP d'informations utiles. Si vous ajoutez des lignes à votre programme, <textarea/>c'est le message dont vous avez besoin!
Morvael

<br/>est ce que je cherchais
Johnny Five


7

essayez ceci .. cela fonctionne:

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

remplacement pour les
balises:

$("textarea#test").val(replace($("textarea#test").val(), "<br>", "&#10;")));

3
c'est en fait $ ("textarea # test"). val (). replace (/ \ n / g, "& # 10;"); (cela remplacera toutes les occurrences de la nouvelle ligne)
Claudiu

7

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

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


5

Vous voudrez peut-être utiliser à la \nplace de /n.


5
Eh bien, un littéral \nne fonctionnera pas non plus, il devrait être une véritable nouvelle ligne.
Greg Hewgill

Oui bien sûr. Mais je suppose (à tort?) Qu'il savait déjà cela.
Zar

2

Après de nombreux 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);
}

0

Ma .replace()fonction utilisant les modèles décrits dans 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

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

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

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

<p id='p3'></p>

Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
Alex Riabov

-5

utilisez simplement <br>
ex:

<textarea>
blablablabla <br> kakakakakak <br> fafafafafaf 
</textarea>

résultat:
blablablabla
kakakakakak
fafafafafaf

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.