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?
11 réponses
Essayez celui-ci:
<textarea cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
Le Saut de ligne et le 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.
<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. This is my statement2</textarea>
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;
};
Essayez ceci.. ça marche:
<textarea id="test" cols='60' rows='8'>This is my statement one. This is my statement2</textarea>
Remplacement des balises
:
$("textarea#test").val(replace($("textarea#test").val(), "<br>", " ")));
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>
Je pense que vous confondez la syntaxe des différentes langues.
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 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émentTEXTAREA
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.
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);
}
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.
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,' ');
// str: "Test Test Test"
T. innerText = "Position de LF:" + T. valeur.indexOf("\n");
p3.innerText = t.value.replace("\n", "");
<textarea id="t">Line 1 Line 2</textarea>
<p id='p3'></p>