contenteditable
Делает содержимое элемента редактируемым прямо на странице.
Синтаксис
<div contenteditable>…</div>Параметры
| Параметр | Тип | Описание |
|---|---|---|
| contenteditable | true | false | plaintext-only | Можно ли редактировать содержимое; `plaintext-only` — только текст без оформления. |
Примеры
Кликните по тексту и измените его:
<style>
[contenteditable] { border: 1px dashed #999; padding: 8px; }
[contenteditable]:focus { outline: 2px solid teal; }
</style>
<div contenteditable="true">Edit me — I am <b>editable</b>.</div>Примечания
Значение элемента не отправляется вместе с формой — его забирают скриптом через innerHTML или textContent. На этом атрибуте строят визуальные редакторы, но для обычного ввода текста лучше подходят <textarea> и <input>.
См. также
- spellcheck — Включает или выключает проверку орфографии в поле.
- <textarea> — Многострочное текстовое поле.
В учебнике
- Атрибуты — Как устроены атрибуты HTML, глобальные атрибуты id, class, title, lang, hidden и style, логические атрибуты и data-атрибуты.