Решение проблемы отображения placeholder в HTML5 textarea

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

Для корректного отображения плейсхолдера в элементе <textarea> укажите атрибут placeholder="Ваш текст" и не пишите текст между открывающим и закрывающим тегом:

<textarea placeholder="Напишите здесь свой роман..."></textarea>

Обратите внимание на свой CSS, в особености на псевдоэлемент ::placeholder, который может изменить оформление текста плейсхолдера:

textarea::placeholder {
  color: #767676; /* Выберите яркий цвет */
}

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

Удаление пробелов

Любые пробелы внутри <textarea> могут выдавать себя за плейсхолдеры. Старайтесь не допускать пробелов, табуляции или других непечатаемых символов перед закрывающим тегом.

Вот как это должно выглядеть:

<!-- Внутри только место для плейсхолдера -->
<textarea placeholder="Что вы думаете?"></textarea>

А вот пример с пробелом, который является ошибкой:

<!-- Пробелы все испортили 🎈🔪 -->
<textarea placeholder="Скажите что-нибудь..."> </textarea> <!-- Мы хотим видеть здесь плейсхолдер! -->

Обработка неожиданных переносов строк

Опасайтесь переносов строк и невидимых символов. Они могут появиться в вашем коде из-за особенностей редактора кода или операционной системы и помешать отображению плейсхолдера. Используйте инструменты типа jsfiddle для поиска и устранения таких скрытых проблем.

Совместимость с HTML5-плагинами

Если вы используете такой плагин как html5form, проверьте его свойство совместимости с плейсхолдерами. Некоторые плагины могут непредсказуемо изменять поведение элементов формы, из-за чего плейсхолдер может "прятаться".

Верность HTML

Избавьтесь от "призраков ошибок" в HTML, которые могут препятствовать работе ваших плейсхолдеров. Используйте валидаторы, такие как сервис W3C, для проверки разметки. Также рекомендуется прочитать спецификацию HTML5, чтобы понять, какие неочевидные аномалии могут скрываться в вашем коде.

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

Вообразите атрибут placeholder для элемента <textarea> как невидимого тренера в пустом зале тренажеров (🏋️).

Пустой зал (🏋️): [_____________]
- Как совет тренера: "Введите текст сюда!"

Когда зал пуст (пользователь еще не вводил текст), советы тренера слышны отчетливо:

<!-- Зал ожидает ваших тренировок 🏋️ -->
<textarea placeholder="Введите текст сюда!"></textarea>

Но когда "спортсмены" начинают заниматься (пользователь начинает вводить текст), голос тренера уступает место:

<!-- Зал наполнен активностью 🏃💨 -->
<textarea>Текст, введенный пользователем...</textarea>

В общем: чтобы услышать тренера (плейсхолдер), нужно следить за "спортсменами" (ввод пользователем). 🚫🏋️💬

Лучшие практики и советы

Визуализация плейсхолдера

Для четкого восприятия плейсхолдера поддерживайте высокий контраст между цветом текста и фоном. Серый текст на сером фоне трудно воспринимается.

<!-- Подайте истинный цвет! -->
textarea::placeholder {
  color: #b3b3b3; /* Контраст – не всегда серое на сером это хорошо */
}

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

Плейсхолдер – это не метка

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

Подготовка перед "приездом публики"

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

<!-- Дорогу оселе представительству! -->
document.querySelectorAll('textarea').forEach(el => el.value = el.value.trim());

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

1. <textarea>: Элемент текстовой области – HTML: HyperText Markup Language | MDN — Обширное руководство по атрибуту placeholder от MDN.
2. HTML атрибут textarea placeholder – w3schools — Краткое описание атрибута плейсхолдера элемента textarea.
3. Can I use... Support tables for HTML5, CSS3, etc — Информация о поддержке атрибута placeholder различными веб-браузерами.
4. Обширное руководство по удобству использования веб-форм — Smashing Magazine — Подробный анализ удобства использования веб-форм, включая элемент textarea.
5. Изучение форм – web.dev — Рекомендации от Google по лучшим практикам создания форм.