contenteditable: редактируемый фрагмент страницы
Атрибут contenteditable разрешает пользователю изменять содержимое элемента непосредственно в документе.
Назначение
Атрибут contenteditable разрешает пользователю изменять содержимое элемента непосредственно в документе.
Как это работает
Значение true включает редактирование, false выключает его для конкретного фрагмента. Содержимое не сохраняется автоматически и не становится полем формы; приложению нужны отдельные чтение, проверка и сохранение.
Пример
<p id="edit-help">Учебная заметка: изменения не сохраняются.</p>
<div contenteditable="true" role="textbox" aria-multiline="true" aria-describedby="edit-help" aria-label="Заметка" style="border:1px solid;padding:12px">Можно изменить этот текст.</div>Что должно получиться
Текст внутри рамки можно редактировать. Подпись объясняет отсутствие сохранения, а доступное имя описывает назначение редактируемой области.
Граница применения и частая ошибка
Вставка форматированного текста может приносить разметку. Нельзя сохранять и затем показывать такой HTML без обработки; для простого ввода обычный textarea обычно предсказуемее.
Самостоятельная проверка
Введите несколько строк и перезагрузите пример. Убедитесь, что изменения пропали: редактирование DOM не равно сохранению. Сравните удобство с textarea для той же задачи.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.