Добавление переноса строки в атрибуте placeholder HTML

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

Не удастся вставить перенос строки напрямую в атрибут placeholder HTML-элемента <textarea>. Однако существует возможность эмуляции переносов, используя псевдоэлемент CSS ::placeholder в сочетании со свойством white-space: pre-line. В CSS перенос строки обозначается с помощью "\A":

textarea::placeholder {
  white-space: pre-line;
}

Стоит отметить, что директива content может не функционировать с ::placeholder в некоторых браузерных реализациях. В качестве альтернативы можно привлечь на помощь JavaScript или разместить дополнительные текстовые элементы.

Альтернативные методы

Существуют и другие методы работы с плейсхолдерами.

Перевод строки через HTML-сущности

Для перевода строки в placeholder элемента textarea вы можете использовать HTML-сущность 
:

<textarea placeholder="Первая строка&#10;Вторая строка"></textarea>

Этот метод корректно работает в Chrome 62, IE10 и Firefox 60, однако может некорректно отображаться в Safari 11.

Подробнее об этом расскажет наш спикер на видео

Применение JavaScript для многострочного плейсхолдера

Когда стандартные методы не способны решить задачу, на эстраду выходит JavaScript. C его помощью можно создать многострочный плейсхолдер, путём модификации value у элемента textarea и контролирования его отображения при срабатывании событий focus и blur:

const textArea = document.querySelector('textarea');
const placeholderText = "Первая строка\nВторая строка";
textArea.value = placeholderText; // Кто сказал, что без плейсхолдера не обойтись 😉?

textArea.addEventListener('focus', function() {
  if (this.value === placeholderText) {
    this.value = '';
  }
});

textArea.addEventListener('blur', function() {
  if (this.value === '') {
    this.value = placeholderText;
  }
});

Обязательно поддерживайте одинаковый размер шрифта для textarea и текста плейсхолдера, чтобы улучшить визуализацию.

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

Чтобы лучше осознать проблему вставки переносов строк в placeholder элемента textarea, представьте себе плакат театрального спектакля:

Обычно вы видите: "Ромео и Джульетта сегодня вечером"

Он представлен в одну строку, так как многострочность в плейсхолдерах не предусмотрена изначально. А вот как бы вы хотели его видеть:

Желаемый формат:
"Ромео и Джульетта
Сегодня в 19:00"

Для демонстрации переноса строк используется подмена:

<textarea placeholder="Ромео и Джульетта. Сегодня в 19:00"></textarea>

Это не настоящий перенос, но он визуально создает эффект разделения текста.

Поиск альтернативных решений

Есть прочные методы представления аналогичной информации:

• Всплывающие подсказки: Текст отображается при наведении курсора на элемент.
• Метки и поясняющий текст: Можно комбинировать фразу-метку и текст под тегом textarea.
• Стилизованные Div-блоки: Элемент div, эмулирующий textarea, отображает текст, который исчезает при фокусе.

Эти методы обычно проявляют стабильность в разных браузерах.

Важные стилевые параметры

Следуйтеглавным стилевым требованиям для обеспечения удобства пользователям:

• Общий размер шрифта: Размер шрифта плейсхолдера должен гармонировать с размером шрифта в textarea.
• Минимальная высота: textarea должна быть достаточно вместительной, чтобы вместить весь текст плейсхолдера.
• Box-sizing: Поставьте box-sizing: border-box для textarea, чтобы границы и отступы не влияли на размеры элемента.

Тестирование в различных браузерах и ограничения

Важно тестировать решение в разных браузерах и операционных системах для гарантии безошибочной работы. Не все методы подходят для каждого браузера, также ограничено использование тегов pre и code в плейсхолдерах.

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

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

1. html – Вставка переноса строки в атрибут placeholder элемента textarea? – Stack Overflow — обсуждения вопроса и ответы сообщества на Stack Overflow.
2. <textarea>: Элемент Textarea – HTML: HyperText Markup Language | MDN — официальная документация по элементу <textarea> на портале MDN Web Docs.
3. ::placeholder | CSS-Tricks — вся информация о стилизации псевдо-элемента ::placeholder доступна на CSS-Tricks.
4. HTML Standard — современный стандарт HTML для <textarea> представлен на портале WHATWG.
5. Learn Forms | web.dev — полное руководство по созданию форм, включая работу с атрибутом placeholder.
6. Can I use... Support tables for HTML5, CSS3, etc — проверьте поддержку атрибута placeholder и других технологий в различных браузерах.