Понадобилось сделать многострочный placeholder в textarea. Выяснилось, что Firefox, в отличие от всех других современных браузеров, не поддерживает перенос строки в элементе placeholder. Хотя делает он это в соответствии с W3C спецификацией — радости это не добавляет.
Все нагугленные решения не понравились. Ставить JQuery-плагины только ради переноса строк в Firefox не хотелось. Решил попробовать сделать свой placeholder во вспомогательном блоке. В итоге получилось вот такое простое решение, которое работает во всех браузерах и предоставляет широкие возможности для кастомизации placeholder.
Стандартное поведение реализуется с помощью jQuery (используется у меня в проекте, при необходимости легко заменяется чистым JS). Если вам нравится скрывать placeholder, когда поле попадает в фокус, то можно обойтись только CSS.
Посмотреть пример на jsfiddle.
UPD
Спасибо gwer за подсказки.
Изменения и уточнения:
- на чистом CSS работать не будет, без JS не обойтись
- в JS нужно использовать событие 'input'. Тогда placeholder исчезает и при вставке из буфера обмена через контекстное меню.
<div id="textAreaWrap">
<textarea id="textArea"></textarea>
<!-- Check here. If textarea has content - set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br> placeholder<br><br>that works in Firefox</div>
</div>
#textAreaWrap {
position: relative;
background-color: white;
}
#textArea {
position: relative;
z-index: 1;
width: 350px;
height: 100px;
min-height: 100px;
padding: 6px 12px;
resize: vertical;
background-color: transparent;
/* When set background-color: transparent - Firefox displays
unpleasant textarea border. Set border style to fix it.*/
border: 1px solid #a5a5a5;
}
#placeholderDiv {
position: absolute;
top: 0;
padding: 6px 13px;
color: #a5a5a5;
}
$(document).on('input', '#textArea', function () {
if ($('#textArea').val()) {
$('#placeholderDiv').hide();
} else {
$('#placeholderDiv').show();
}
});