contenteditable глобальный атрибут HTML

contenteditable глобальный атрибут — это перечисляемый атрибут, который указывает, можно ли редактировать элемент пользователю. Если можно, браузер изменяет его виджет, чтобы разрешить редактирование.

Попробуйте

<blockquote contenteditable="true">
  <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>

blockquote {
  background: #eeeeee;
  border-radius: 5px;
  margin: 16px 0;
}

blockquote p {
  padding: 15px;
}

cite {
  margin: 16px 32px;
  font-weight: bold;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

[contenteditable="true"] {
  caret-color: red;
}

Значение

Атрибут должен принимать одно из следующих значений:

• true или пустая строка, указывающая, что элемент доступен для редактирования.
• false, указывающее, что элемент недоступен для редактирования.
• plaintext-only, указывающее, что исходный текст элемента доступен для редактирования, но форматирование расширенного текста отключено.

Если атрибут указан без значения, например <label contenteditable>Example Label</label>, его значение считается пустой строкой.

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

Обратите внимание: хотя допустимые значения этого атрибута включают true и false, это перечисляемый, а не логический атрибут.

Задать цвет текстового курсора можно с помощью свойства CSS caret-color.

Элементы, которые становятся доступными для редактирования и, следовательно, интерактивными благодаря атрибуту contenteditable, можно фокусировать. Они участвуют в последовательной навигации с помощью клавиатуры. Однако элементы с атрибутом contenteditable, вложенные в другие элементы contenteditable, по умолчанию не добавляются в последовательность перехода по табуляции. Добавить вложенные элементы contenteditable в последовательность клавиатурной навигации можно, указав значение tabindex (tabindex="0").

При вставке содержимого в элемент с contenteditable="true" сохраняется всё форматирование. При вставке содержимого в элемент с contenteditable="plaintext-only" всё форматирование удаляется.

Примеры

Вставка содержимого в contenteditable

В этом примере показаны два элемента <div> с атрибутом contenteditable: у первого значение true, у второго — plaintext-only. Скопируйте текст ниже и вставьте его в каждый элемент div, чтобы увидеть результат.

HTML

<h2>Pasting areas</h2>
<section class="pasting">
  <div class="wrapper">
    <h3>contenteditable="true"</h3>
    <div contenteditable="true"></div>
  </div>
  <div class="wrapper">
    <h3>contenteditable="plaintext-only"</h3>
    <div contenteditable="plaintext-only"></div>
  </div>
</section>

Спецификации

Совместимость с браузерами

См. также

• Все глобальные атрибуты
• HTMLElement.contentEditable и HTMLElement.isContentEditable
• Свойство CSS caret-color
• Событие input интерфейса HTMLElement