Як додати розриви рядків до текстової області HTML?

Я редагую <textarea>JavaScript. Проблема полягає в тому, що коли я роблю в ньому розриви рядків, вони не відображатимуться. Як я можу це зробити?

Я отримую значення для написання функції, але вона не дасть розривів рядків.

Проблема випливає з того, що розриви рядків ( \n\r?) Не збігаються з <br/>тегами HTML

var text = document.forms[0].txt.value;
text = text.replace(/\r?\n/g, '<br />');

ОНОВЛЕННЯ

Оскільки багато коментарів та власний досвід свідчать про те, що це <br> рішення не працює, як очікувалося, ось приклад того, як додати новий рядок до textareaвикористання "\ r \ n"

function log(text) {
    var txtArea ;

    txtArea = document.getElementById("txtDebug") ;
    txtArea.value +=  text + '\r\n';
}

Я вирішив зробити це редагуванням, а не як нове запитання, оскільки це занадто популярна відповідь, щоб бути помилковою чи неповною.

якщо ви використовуєте загальний сценарій Java і вам потрібно призначити рядок значенню області тексту

 document.getElementById("textareaid").value='texthere\\\ntexttext'.

вам потрібно замінити \nабо < br >на\\\n

інакше він надається Uncaught SyntaxError: Unexpected token ILLEGALу всіх браузерах.

Можливо, хтось вважає це корисним:

У мене виникли проблеми з розривами рядків, які передавалися від змінної сервера до змінної javascript, а потім javascript записував їх у textarea (використовуючи значення прив'язки значень knockout.js).

Рішення було подвійним уникненням нових ліній:

orginal.Replace("\r\n", "\\r\\n")

на стороні сервера, тому що за допомогою єдиних символів втечі JavaScript не розбирався.

Ви повинні використовувати \nдля linebreaksвнутрішньоїtextarea

Якщо ви хочете відобразити текст на власній сторінці, ви можете використовувати <pre>тег.

document.querySelector('textarea').addEventListener('keyup', function() {
  document.querySelector('pre').innerText = this.value;
});

<textarea placeholder="type text here"></textarea>
<pre style="font-family: inherits">
The
new lines will
be respected
      and spaces too
</pre>

Новий рядок - це просто пробіл для браузера, і він не буде розглядатися як звичайний простір (""). Щоб отримати новий рядок, потрібно вставити <BR />елементи.

Ще одна спроба вирішити проблему: Введіть текст у текстову область, а потім додайте трохи JavaScript за кнопкою, щоб перетворити невидимі символи в щось читабельне і скинути результат на а DIV. Це покаже вам, що хоче ваш браузер.

У мене є текстовий пояс з ідентифікатором - це #infoartist слідкувати:

<textarea id="infoartist" ng-show="dForm" style="width: 100%;" placeholder="Tell your contacts and collectors about yourself."></textarea>

У коді javascript я отримаю значення textarea і заміню пропущений новий рядок (\ n \ r) <br />тегом, таким як:

var text = document.getElementById("infoartist").value;
text = text.replace(/\r?\n/g, '<br />');

Тож якщо ви використовуєте jquery (як я):

var text = $("#infoartist").val();
text = text.replace(/\r?\n/g, '<br />');

Сподіваюся, це допомогло вам. :-)

Якщо вам просто потрібно надіслати значення testarea серверу з розривами рядків, використовуйте nl2br

ось те, що я зробив за ті ж клопоти, що і у мене.

коли я передаю текст на наступну сторінку в jsp, я читаю його як текстовий пояс замість того, щоб прочитати щось на зразок

тож вихід вийшов так, як ви хотіли. а для інших властивостей ви можете використовувати, як показано нижче.

<textarea style="background-color: white; border: none; width:660px;font-family: Arial, Helvetica, sans-serif; font-size:1.0em; resize:none;" name="text" cols="75" rows="15" readonly="readonly" ><s:property value="%{text}"/></textarea>