contenteditable HTML атрибут - редагований вміст

Глобальний атрибут contenteditable дозволяє зробити HTML-елемент редагованим користувачем.

Атрибут contenteditable є перелічуваним атрибутом. Він має три стани: true (елемент редагований), false (елемент не редагований) та plaintext-only (редагується лише сирий текстовий вміст, розширене форматування вимкнено). Стан за замовчуванням, inherit, означає, що можливість редагування елемента залежить від стану його батьківського елемента.

Використання contenteditable може мати наслідки для безпеки та доступності. Переконайтеся, що ви правильно обробляєте введення користувача на стороні сервера та надаєте відповідні ARIA-атрибути для допоміжних технологій.

HTML
<div contenteditable="true">...</div>

Значення

Атрибут може приймати наступні значення:

true

Елемент є редагованим.

false

Елемент не є редагованим.

plaintext-only

Редагується лише сирий текстовий вміст, розширене форматування вимкнено.

Приклади використання

Результат
<div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  <p>Цей текст можна редагувати. Спробуйте змінити його!</p>
</div><br>

<div contenteditable="false" style="border: 1px solid #ccc; padding: 10px;">
  <p>Цей текст не можна редагувати.</p>
</div><br>

<div contenteditable="plaintext-only" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  <p>Цей текст можна редагувати, але без форматування (наприклад, жирний, курсив).</p>
</div>

Підтримка браузерів

contenteditable
plaintext-only

Останнє оновлення: