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