Добавляем переносы строк в HTML textarea с помощью JS

Быстрый ответ

Для добавления переноса строки в элемент <textarea> языка HTML используется спецсимвол \n. Вот пример его применения:

document.querySelector('textarea').value += 'Строка 1\nСтрока 2';

В результате в поле ввода отобразится следующее:

Строка 1
Строка 2

Для универсальной совместимости с различными операционными системами рекомендуется использовать сочетание символов \r\n:

document.querySelector('textarea').value += 'Строка 1\r\nСтрока 2';

Если работаете с пользовательским вводом или предформатированными данными, не забывайте экранировать спецсимволы, чтобы избежать выдачи ошибок типа Uncaught SyntaxError.

Подробнее о символах новой строки

Часто возникает путаница между HTML-тегом <br/> и символами новой строки \n и \r\n в JavaScript. Вставка переноса строки в HTML-документах обычно осуществляется с помощью тега <br/>. В то же время символы \n и \r\n используются в строковых литералах JavaScript или в качестве значений элементов <textarea>.

Сочетание элементов textarea и pre

Хотите сохранить первоначальное форматирование текста, включая все пробелы и переносы? Отличное решение: использовать вместе тег <pre> и элемент textarea.

<pre id="textPreview"></pre>
<textarea id="textInput" onkeyup="document.getElementById('textPreview').innerText = this.value;"></textarea>

Такое применение тега <pre> позволит вам видеть изменения форматирования текста в реальном времени.

Управление переносами строк: практические примеры

Работа с переносами строк в JavaScript может показаться волшебством, но вот несколько "волшебных заклинаний":

1. Добавление переноса строки: достаточно обратиться к свойству value элемента textarea:

   JS

   Скопировать код

   let textArea = document.getElementById('textAreaId');
   textArea.value += 'Дополнительная строка текста\n'; // И вот она, новая строка!

   Запустить код

2. Трансформация переносов строк в HTML: при выводе содержимого textarea в блок <div>, замените символ \n на тег <br/>:

   JS

   Скопировать код

   let formattedText = textArea.value.replace(/\n/g, '<br>');
   document.getElementById('outputDiv').innerHTML = formattedText; // Просто как волшебством!

   Запустить код

3. "Магия" клавиши 'Enter': добавьте событие keyup, чтобы отслеживать и обрабатывать вставку новых строк:

   JS

   Скопировать код

   textArea.addEventListener('keyup', (event) => {
     if (event.key === 'Enter') {
       // Обрабатываем нажатие на Enter!
       handleNewLine();
     }
   });

   Запустить код

4. Фреймворки для управления данными: системы вроде KnockoutJS позволяют осуществлять привязку обновлений поля textarea, благодаря чему новые строки учитываются автоматически.

Не забывайте про экранирование '\n', заменяя его на '\\n' в строках, чтобы избежать неожиданных ошибок парсинга.

Визуализация

Можно представить элемент textarea как сосуд, в котором хранятся послания (🏺):

🏺: ["Дорогая Алиса,📜", "Надеюсь, ты в порядке.📜", "До скорой встречи!📜"]

Добавление переноса строки выглядит как вставка перышка (🪶) между сообщениями:

<textarea>
Дорогая Алиса,<br> <!-- 🪶 -->
Надеюсь, ты в порядке.<br> <!-- 🪶 -->
До скорой встречи!
</textarea>

Таким образом, каждое сообщение занимает свой "пузырек" пространства 🪶.

Теперь попробуйте что-либо ввести и нажать Enter – в таком случае вы оставите за собой перышко 🪶. В программировании этот жест эквивалентен добавлению символа \n:

document.getElementById('textAreaId').value += 'Желаю тебе всего наилучшего,\nС теплыми пожеланиями,\n[Ваше Имя]';

Результат этого действия: каждое из введенных предложений будет представлено в отдельной строке textarea.

Полезные материалы

1. <textarea>: Элемент Textarea – HTML: HyperText Markup Language | MDN — Подробная информация о элементе <textarea> от Mozilla Developer Network.
2. HTML тег textarea | W3Schools — Инструкции и примеры применения тега textarea в HTML.
3. Быстрый CSS трюк: Как точно центрировать элемент | CSS-Tricks — Методы стилизации и центрирования элемента textarea с использованием CSS.
4. html – Как добавить новую строку в textarea? | Stack Overflow — Обзор различных подходов к вставке переносов строк в textarea.
5. Учебник по React | DigitalOcean — Руководство по управлению содержимым textarea с использованием React.
6. WebAIM: Создание доступных форм — элементы управления | WebAIM — Основные принципы создания доступных форм с использованием элемента textarea.