Placeholder for contenteditable div

Поддержи проект!!!

placeholder для contenteditable div, подсказка для div с contenteditable true.
Как вы знаете, что placeholder - это подсказка для полей ввода, но что делать если требуется сделать такую подсказку для contenteditable

Подробно о подсказке в div с contenteditable

1. Пример использования подсказки в contenteditable div

Скопировать ссылку

Пример использования подсказки в contenteditable div

Для того, чтобы у нас заработала подсказка (placeholder) для contenteditable нам понадобится:

Элемент Dom - div

Добавляем атрибут 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 с placeholder

---

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

Теги:
Placeholder в contenteditable