Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Атрибут contenteditable

Справочник: 

Характеристики атрибута

В каких браузерах работает?

6.0+ 4.0+ 9.2+ 4.0+ 4.0+ 3.0+ 1.0+

Для чего используется

Позволяет пользователю редактировать текстовую часть, а именно те элементы, к которым применен атрибут. Допускаются типичные команды для обработки текста, типа удаления, вставки копируемого текста и прочее.

В каких тегах он может использоваться?

a abbr address area
b basefont bdo blockquote
body button caption cite
code col colgroup dd
del dfn dir div
dl dt em fieldset
font form h1 - h6 i
iframe input ins kbd
label legend menu ol
option p pre q
samp select span strong
sub sup table tbody
td textarea tfoot th
thead tr ul var

Как правильно задавать?

Простейший пример использования атрибута выглядит следующим образом:

contenteditable="true | false"

Какие значения могут быть записаны в атрибут?

  • true - разрешает пользователю вносить свои изменения.
  • false - доступ к изменениям блока недоступен.

Допускается использование атрибута с пустым значением - contenteditable="". В таком случае система срабатывает также, как и при значении true.

По умолчанию считывает показатели родительского элемента.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут contenteditable</title>
 </head>
 <body>
  <h1 contenteditable="true">Текст для пользователя</h1>
  <p contenteditable="">Сюда Вы можете записать все что пожелаете.
Можете попробовать и увидите как работает атрибут contenteditable</p>
 </body>
</html>

Тип HTML атрибута: