Многострочный textarea placeholder, который работает в Firefox

[@Ninjak]

Хрень какая-то… если кликнуть по плэйсхолдеру, то фокус не сработает на текстареи… если так и делать, то плэйсхолдер надо делать лэйбелом и указывать for. Также не понятно, почему только в ФФ? В других браузерах ЦСС нынче не работает? ;)

[@gwer]

Плейсхолдер расположен под textarea (z-index), потому фокус ловится там, где надо.

Работает и в FF, и в прочих браузерах, в отличие от решения «из коробки», которое FF игнорирует. Собственно, отличие от «коробочного» решения заключается в поддержке лисой, что и отражено в заголовке.

[@gwer]

Надо вешаться на другое событие. С keydown некорректно будет работать при вставке из буфера обмена через контекстное меню. Используйте событие input.

Непонятны причины использования setTimeout. Он зачем вдруг понадобился?

Для обертки не помешает overflow: hidden на случай, когда плейсхолдер вдруг окажется больше, чем textarea.

Еще можно обойтись без background-color: transparent и сопутствующих проблем, если обертку сделать label'ом и не шаманить с z-index'ами.

А решение на чистом CSS не будет работать. Плейсхолдер убирается только пока есть фокус на поле. Когда фокус пропадет, плейсхолдер вернется, несмотря на наличие текста.

[@everythingIsPossible]

setTimeout был нужен при использовании keydown — без таймаута (даже нулевого) проверка поля происходит до того как как там появится символ.
С использованием события input все стало работать и при вставке через контекстное меню + setTimeout стал не нужен.

попробовал overflow: hidden – не получается, т.к. у блока placeholder стоит position: absolute
Но я считаю это некритичным, т.к. при верстке такого специфического поля несложно учесть его размер,
зная текст для placeholder и задать min-height: XXXpx;

попробовал с label и без background-color: transparent и z-index
тоже не получилось без них, т.к. при клике правой кнопкой мыши по placeholder появляется контекстное меню как при клике по блоку, а не по textarea.
Возможно это как-то можно сделать, хотя мне пока непонятно зачем. Чем плохо использование background-color: transparent и z-index?

С чистым CSS действительно не прокатывает.

Пост обновил.
Большое спасибо за подсказки!

[@stcherenkov]

Используйте на плэйсхолдере всю мощь pointer-events: none.

[@everythingIsPossible]

Таки да, overflow: hidden можно применить
для этого у placeholder нужно к position: absolute и top: 0 добавить еще bottom: 0, right:0, left:0;

Надо заметить, что цель использования overflow: hidden достигается не полностью. Размер обертки по вертикали почему-то получается на несколько пикселей больше textarea, а размер placeholder совпадает с размером обертки.
Поэтому overflow: hidden прячет лишний текст placeholder, но часть первой спрятанной строки выглядывает под textarea.

[@dspancov]

Работает только с прозрачным textarea, это смех.

[@gwer]

Комментом выше я написал, как можно реализовать без прозрачного textarea. Впрочем, не считаю это совсем уж большой проблемой. Просто стилей чуть больше. Бэкграунд textarea заменяется бэкграундом обертки.

[@dspancov]

А зачем? если можно сделать без велосипедов на JS.

[@everythingIsPossible]

можно пример без велосипедов?

[@gwer]

Динамически менять контент textarea? Согласен, может быть приемлемым. Только это опять будет велосипедом.

Я на решение смотрел со своей колокольни: недавно реализовывал нечто подобное для однострочных инпутов в соответствиями с принципами Material. Там как раз после перебора пачки вариантов пришел к похожему, но это в силу ограничений, которых нет в задаче автора.

[@dooza]

можно было обойтись без JS, с помощью css

[@everythingIsPossible]

Я пробовал разные варианты. На чистом CSS пока не получилось.
Если знаете как — подскажите.

[@Keyten]

Попробуйте поиграться с разными word-wrap, break-word и т.п., вдруг поможет.

И ещё, помнится, во времена IE6 плейсхолдеры реализовывали, просто изменяя value у текстовых полей, зачем накладывать див сверху? Критично, чтобы value был пустым, если в поле плейсхолдер?

[@everythingIsPossible]

Готовые решения с изменением value у текстовых полей показались мне излишне громоздкими и неудобными.
Зачем много кода, если можно обойтись обработкой одного события в JS.