Новая строка в текстовой области

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

Я попробовал оба, но новая строка не отражается при рендеринге html файла. Как я могу это сделать?

Ответ 1

Попробуй это:

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

Ответ 2

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

This is my statement2</textarea>

Скрипка, показывающая, что это работает: http://jsfiddle.net/trott/5vu28/.

Если вы действительно хотите, чтобы это было в одной строке исходного файла, вы можете вставить ссылки на символы HTML для перевода строки и возврата каретки, как показано в ответе @Bakudan:

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

Ответ 3

Я нашел String.fromCharCode(13, 10) полезным при использовании движков просмотра. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

Это создает строку с фактическими символами новой строки в ней и заставляет механизм представления выводить новую строку, а не экранированную версию. Например: с помощью механизма просмотра NodeJS EJS - это простой пример, в котором нужно заменить любой \n:

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>

Визуализирует

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

Ответ 4

Я думаю, что вы путаете синтаксис разных языков.

  • &#10; является (значение HtmlEncoded ASCII 10 или) литералом перевода строки в строке HTML. Но символ перевода строки НЕ отображается как разрыв строки в HTML (см. Примечания внизу).

  • \n - символьный литерал перевода строки (ASCII 10) в строке Javascript.

  • <br/> это разрыв строки в HTML. Многие другие элементы, например, <p>, <div> и т.д., Также отображают разрывы строк, если они не переопределены некоторыми стилями.

Надеемся, что следующая иллюстрация прояснит ситуацию:

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>

Ответ 5

попробуйте это.. он работает:

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

замена тегов:

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

Ответ 6

Чтобы получить новую строку внутри текстовой области, поместите фактический разрыв строки:

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

Ответ 7

Возможно, вы захотите использовать \n вместо /n.

Ответ 8

После множества тестов следующий код работает для меня в 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);
}

Ответ 9

Если вы говорите об использовании значения textarea где-то еще на вашей странице и рендеринга новых строк, я нашел css propperty white-space: pre-wrap; работать очень хорошо, и это простое решение. Возможно, это помогает кому-то.

Ответ 10

Моя .replace() использующая шаблоны, описанные в других ответах, не работала. Шаблон, который работал для моего случая:

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"

Ответ 11

T.innerText = "Положение LF:" + t.value.indexOf("\n");

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

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

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

Ответ 12

Разрыв введите строку ключевого слова в Textarea, используя CSS:

white-space: pre-wrap;

Ответ 14

просто используйте <br>
например:

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

результат:
blablablabla
kakakakakak
fafafafafaf