В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 15-04-2024! 🞨
Меню :


Blog (1400)
php (331)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
form html (30)
online (29)
fonts (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
info (16)
board (16)
php time (16)
color (15)
js events (14)
img (14)
js url (14)
js time (14)
notepad (13)
select (13)
знак (13)
osclass (13)
htaccess (13)
download (12)
table (12)
dw block (12)
php path (12)
keyboard (12)
php img (12)
form (11)
jsphp (11)
icon (11)
js delete (10)
yandex (10)
mouse (10)
keyframes (10)
chart (9)
dosite (9)
hover (9)
browser (8)
php post (7)
comment (7)
php url (7)
canvas (6)
click (6)
list (6)
adminka (6)
mysql (6)
vs code (6)
iframe (6)
php get (6)
js id (5)
js math (5)
reg.ru (5)
value (5)
mb (5)
heading (5)
tag a (5)
year (5)
ftp (5)
base64 (4)
day (4)
submit (4)
week (4)
js form (4)
symbols (4)
month (4)
console (4)
vk (4)
pages (4)
scandir (4)
bbcode (4)
php var (4)
ssl (4)
нок (4)
games (4)
task (4)
xml (4)
line (3)
ucoz (3)
domen (3)
https (3)
куб (3)
money (3)
captcha (3)
numbers (3)
js hash (3)
js post (3)
jquery post (3)
js img (3)
padding (3)
qr kod (2)
seo (2)
js vars (2)
prompt (2)
counter (2)
details (2)
height (2)
video (2)
youtube (2)
sitemap (2)
tag hr (2)
typeof (2)
рся (2)
google (2)
arrows (2)
rutube (1)
cursor (1)
нод (1)
archive (1)
scroll (1)
jino (1)
smile (1)
windows (1)
speed (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

Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Теги:
Placeholder в contenteditable
Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.014851 секунд. Подробнее