placeholder для contenteditable div, подсказка для div с contenteditable true.
Как вы знаете, что placeholder - это подсказка для полей ввода, но что делать если требуется сделать такую подсказку для contenteditableПодробно о подсказке в div с contenteditable
Пример использования подсказки в contenteditable div
Для того, чтобы у нас заработала подсказка (placeholder) для contenteditable нам понадобится:
Добавляем атрибут data + через тире "placeholder" и добавляем текст:
data-placeholder="Вставьте текст"
+ добавим атрибут border, чтобы видеть края нашего дива.
style="border: 1px solid"
Соберем нашу конструкцию с подсказкой в div:
<div contenteditable="true" data-placeholder="Вставьте текст" style="border: 1px solid"></div>
Если мы так оставим, то ничего не заработает, нам понадобятся стили,Ю которые актируют подсказку в contenteditable :
<style>
[contenteditable]:empty:before {
content: attr(data-placeholder);
color: grey;
display: inline-block;
}
</style>
[contenteditable]:empty:before {
content: attr(data-placeholder);
color: grey;
display: inline-block;
}
</style>
