php (283)
js (166)
html (138)
css (116)
html tags (61)
php function (53)
jquery (40)
edit text (37)
php array (30)
form html (29)
fonts (27)
ruweb.net (23)
type of input (22)
html attribute (22)
foto (22)
atom (20)
online (19)
sublime text 3 (19)
forum (19)
svg (18)
Показать еще :
css property (17)
board (17)
hosting (17)
html book (16)
php file (16)
js method (16)
input (15)
color (15)
link (15)
js replace (15)
php folder (15)
php string (15)
matematika php (15)
php date (15)
js events (14)
download fonts (13)
htaccess (13)
table (13)
osclass (13)
path (12)
js delete (12)
select (12)
download (11)
img (11)
font awesome (11)
form (11)
dw block (11)
notepad (11)
icon (11)
php time (11)
keyboard (11)
php img (11)
jsphp (11)
yandex webmaster (11)
mouse (10)
url (10)
css shape (9)
js time (9)
php session (9)
info (9)
yandex (9)
database (9)
js array (8)
drop down list (8)
dreamweaver (7)
php operator (7)
php url (7)
code editor (7)
queryselector (7)
background (7)
encryption (7)
comment (7)
php count (7)
cookie (7)
dosite (7)
hover (7)
jquery attribute (7)
task (7)
calculator (7)
different (7)
$ server (7)
selector css (7)
php post (7)
robots txt (6)
js url (6)
list (6)
iframe (6)
click (6)
year (6)
filezilla (6)
mysql (6)
js class (6)
alphabet (6)
substr php (6)
tags meta (6)
border property (6)
php mistakes (6)
position element (6)
types php (5)
directadmin (5)
search (5)
$ global vars (5)
ftp (5)
display property (5)
chart (5)
browser (5)
js slice (5)
js id (5)
mb (5)
js attribute (5)
paragraph (5)
php get (5)
registration (5)
heading (5)
php cookie (5)
adminka (5)
value (5)
template (4)
symbols (4)
php constants (4)
vk (4)
about me (4)
position (4)
clock fonts (4)
php cycle (4)
js form (4)
console (4)
php register (4)
text decoration (4)
mounth (4)
textarea (4)
js string (4)
submit (4)
classlist (4)
reg.ru (4)
js window (4)
bbcode (4)
day (4)
week (4)
password (3)
captcha (3)
js img (3)
auto form (3)
selector (3)
php counters (3)
ucoz (3)
line (3)
checkbox (3)
php get element (3)
php method (3)
jquery class (3)
font style (3)
php cycle for (3)
delete tag (3)
overflow (3)
pseudo element (3)
attribute data (3)
jquery post (3)
ssl (3)
scandir (3)
pages (3)
js post (3)
https (3)
question (3)
dwweb ru (3)
subdomain (3)
count symbol (3)
php rand (3)
vs code (3)
padding (3)
рся (2)
second (2)
js property (2)
money (2)
title attribute (2)
text align (2)
type file (2)
js cookie (2)
youtube (2)
errordocument (2)
php mail (2)
audio player (2)
video (2)
typeof (2)
source code (2)
comments+ (2)
seo (2)
facebook (2)
php round (2)
function time (2)
sitemap (2)
js value (2)
js object (2)
title (2)
css book (2)
tag hr (2)
cursor (2)
jquery method (2)
first letter (2)
js vars (2)
counter (2)
authorization (2)
file cms (2)
arrows (2)
base64 (2)
php form (2)
qr kod (2)
height (2)
php array sort (2)
details (2)
archive (1)
numbers (1)
php info (1)
xmlhttprequest (1)
jquery book (1)
domen (1)
books (1)
математика (1)
калькулятор (1)
куб (1)
scroll (1)
input html (1)
smile (1)
header (1)
js folder (1)
windows (1)
sublime text 4 (1)
google (1)
type range (1)
speed (1)
css indent (1)
computer (1)
sberbank (1)
Placeholder for contenteditable div
Как вы знаете, что 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>
Результат вывода contenteditable с placeholder
Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
