Мне нужно было создать многострочный заполнитель в текстовой области.
Оказалось, что Firefox, в отличие от всех других современных браузеров, не поддерживает разрывы строк в элементе-заполнителе.
Хоть он и делает это в соответствии со спецификацией W3C, но радости это не добавляет. Мне не понравились все решения, которые я искал в Google. Я не хотел устанавливать плагины JQuery только для переноса строк в Firefox. Я решил попробовать сделать свой заполнитель во вспомогательном блоке.
В результате получилось простое решение, которое работает во всех браузерах и предоставляет широкие возможности по настройке заполнителя.
Стандартное поведение реализовано с помощью jQuery (используется в моем проекте, при необходимости легко заменяется чистым JS).
Если вы хотите скрыть заполнитель, когда поле находится в фокусе, вы можете обойтись только CSS. Смотреть пример на jsfiddle. УПД Спасибо Гвер за советы.
Изменения и уточнения:
- на чистом CSS не получится, без JS не обойтись
- в JS вам нужно использовать событие «вход».
Затем заполнитель исчезает при вставке из буфера обмена через контекстное меню.
<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 () {
Теги: #Firefox #многострочный заполнитель #jQuery #CSS #Firefox #jQuery
-
Закладываем Фундамент Для Будущего Rust
19 Oct, 24
