Атрибут contenteditable тега <ul>
Описание
Атрибут contenteditable позволяет сделать список <ul> и его элементы редактируемыми прямо в браузере. Пользователи могут добавлять, удалять и изменять пункты списка.
<ul contenteditable="true">
<li>Редактируемый пункт 1</li>
<li>Редактируемый пункт 2</li>
<li>Нажмите для добавления нового пункта</li>
</ul>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
true |
Разрешает редактирование | Для интерактивных списков |
false |
Запрещает редактирование | По умолчанию (можно не указывать) |
inherit |
Наследует от родителя | В сложных редактируемых структурах |
Особенности работы:
- Редактируется весь список, включая добавление/удаление элементов
- Enter создает новый пункт списка
- Backspace удаляет пустые пункты
- Можно комбинировать с атрибутом
spellcheck
Пример с CSS-стилизацией:
<style>
.editable-list {
border: 1px dashed #ccc;
padding: 10px;
min-height: 100px;
}
.editable-list:focus {
outline: 2px solid #4285f4;
background-color: #f8f9fa;
}
</style>
<ul class="editable-list" contenteditable="true">
<li>Начните редактировать этот список</li>
</ul>
Рекомендации:
- Добавляйте визуальные подсказки для редактируемых списков
- Используйте JavaScript для сохранения изменений
- Ограничивайте область редактирования при необходимости
- Комбинируйте с
data-*атрибутами для хранения метаданных
Ограничения:
- Разные браузеры могут по-разному реализовывать редактирование
- Сложно контролировать форматирование при вставке текста
- Для сложных редакторов лучше использовать специализированные библиотеки
Важно: Для production-решений с богатым редактированием рассмотрите использование специализированных библиотек:
- Quill
- TinyMCE
- CKEditor
- ProseMirror