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

Question

<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-файла. Как я могу это сделать?

Answer 1

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

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


 Перевод строки и 
 Возврат каретки - это HTML-объекты ^{Википедии}. Таким образом, вы на самом деле разбираете новую строку ("\n"), а не отображаете ее как текст.

Answer 2

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

white-space: pre-wrap;

Answer 3

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

• 
 является (значение 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>

Несколько замечаний по HTML:

• innderHTML значение TEXTAREA элемент не отображает HTML. Попробуйте следующее: <textarea>A <a href='x'>link</a>.</textarea> видеть.
• P Элемент отображает все непрерывные пробелы (включая новые строки) как один пробел.
• Символ LF не отображает новую строку или разрыв строки в HTML.
• TEXTAREA визуализирует LF как новую строку внутри поля текстовой области.

Answer 4

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

Это создает строку с фактическими символами новой строки в ней и заставляет механизм представления выводить новую строку, а не экранированную версию. Например: Использование NodeJS EJS view engine - это простой пример, в котором любой \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>

---

заменить все:

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

Answer 5

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

Answer 6

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

<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;")));

Answer 7

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

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

Answer 8

Вы также должны проверить css свойство (mdn docs) вашего элемента, убедитесь, что для него установлено значение, которое не подавляет разрывы строк, например:

      white-space: pre-line;

Вам будут интересны эти 3 значения:

pre
Последовательности пробелов сохраняются. Строки разрываются только в символах новой строки в исходном тексте и в элементах <br>.

pre-wrap
Последовательности пробелов сохраняются. Строки разбиваются на символы новой строки, на <br> и по мере необходимости для заполнения полей строк.

pre-line
Последовательности пробелов свернуты. Строки разбиваются на символы новой строки, на <br> и по мере необходимости для заполнения полей строк.

Answer 9

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

Answer 10

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

Answer 11

Если вы используете реакцию

Внутри функции

      const handleChange=(e)=>{
const name = e.target.name;
let value = e.target.value;
value = value.split('\n').map(str => <span>{str}<br/></span>);
SetFileds({ ...fileds, [name]: value });
}

Answer 12

Простое и естественное решение, не использующее стили CSS или числовые ссылки на символы, такие как 
было бы использовать 
ссылка на сущность персонажа:

      The cardinal directions are:
- North
- East
- South
- West

---

Примечание . Так как это определяется просто как LF (перевод строки или U+000Aкодовая точка Unicode), нет уверенности на 100%, подходит ли он для ситуаций, когда требуется вся последовательность CR + LF (возврат каретки + перевод строки). Но тогда он работал в моих тестах Chrome, Edge и WebView2, проведенных в Windows 10, поэтому его можно использовать.

Answer 13

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

Answer 14

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>

Answer 15

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

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

// str: "Test

Test
Test"

Answer 16

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

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

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