СКРИПТЫ
ТЕГИ:
php (315)
js (235)
html (145)
css (125)
html tags (62)
js tag (56)
jquery (41)
text (36)
js method (35)
js date (32)
php array (31)
form html (30)
fonts (27)
link (26)
ruweb.net (25)
Показать еще :
online (24)
foto (22)
php file (21)
atom (20)
forum (19)
svg (18)
hosting (17)
php date (17)
php time (16)
html book (16)
input (16)
board (16)
color (15)
js events (14)
js url (14)
img (13)
js time (13)
notepad (13)
htaccess (13)
osclass (13)
table (12)
info (12)
select (12)
dw block (12)
php path (12)
знак (12)
php img (12)
jsphp (11)
icon (11)
download (11)
form (11)
keyboard (11)
js delete (10)
yandex (10)
mouse (10)
hover (9)
dosite (8)
comment (7)
cookie (7)
php url (7)
click (6)
browser (6)
php get (6)
year (6)
list (6)
iframe (6)
mysql (6)
adminka (5)
js id (5)
mb (5)
chart (5)
heading (5)
value (5)
ftp (5)
search (5)
tag a (5)
js math (4)
ucoz (4)
reg.ru (4)
task (4)
vk (4)
symbols (4)
ssl (4)
нок (4)
day (4)
week (4)
js form (4)
submit (4)
bbcode (4)
pages (4)
month (4)
base64 (4)
console (4)
php var (4)
js hash (3)
captcha (3)
numbers (3)
куб (3)
padding (3)
line (3)
scandir (3)
js img (3)
https (3)
js post (3)
vs code (3)
seo (2)
sitemap (2)
prompt (2)
js vars (2)
tag hr (2)
video (2)
youtube (2)
qr kod (2)
google (2)
arrows (2)
typeof (2)
money (2)
рся (2)
height (2)
details (2)
domen (2)
counter (2)
cursor (1)
smile (1)
speed (1)
windows (1)
archive (1)
rutube (1)
scroll (1)
нод (1)
header (1)

Placeholder for contenteditable div

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

Можете не благодарить, лучше помогите!
Теги :
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

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

Построение гравиков
Основа для графика : счетчик посещаемости.
На отдельной : странице.
Последние комментарии :
Марат :
18.11.2022 17:21
Как же я вами завидую! Сколько у вас свободного…
подробнее.
>" :
18.11.2022 17:18
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
18.11.2022 17:17
А как восклицательные знаки? С ними всё нормально??? Или нет??? Вы к ним как…
подробнее.
Марат :
18.11.2022 17:15
В мире много разных отклонений... по статистике примерно 10% человек в странах имеют такие.... Была у меня…
подробнее.
qwe"> :
18.11.2022 17:00
Читать тяжело. Я еще фильтрацию тегов потыкаю, если вы не…
подробнее.
Марат :
20.10.2022 10:10
Очень рад за Вас!
подробнее.
ruweb
Страница загружена за : 0.018451 секунд. Подробнее