Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Placeholder for contenteditable div

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

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

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

  1. Пример использования подсказки в contenteditable div
  1. Пример использования подсказки в 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


Последняя дата редактирования : 21.03.2021 13:26
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Placeholder в contenteditable

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.