Атрибут contenteditable тега <summary>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <summary> редактируемым непосредственно в браузере. Это полезно для создания интерактивных элементов управления, где пользователи могут изменять заголовки раскрывающихся блоков.
<details>
<summary contenteditable="true">Нажмите для редактирования этого заголовка</summary>
<p>Содержимое блока...</p>
</details>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
true |
Разрешает редактирование | Для интерактивных элементов управления |
false |
Запрещает редактирование | По умолчанию, когда редактирование не требуется |
Особенности работы:
- Сохраняет функциональность элемента
<details> - Позволяет редактировать только текст, не структуру
- Работает во всех современных браузерах
- Изменения не сохраняются автоматически
Пример с CSS стилизацией:
<style>
details {
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
summary[contenteditable="true"] {
background-color: #f5f5f5;
padding: 8px;
cursor: text;
outline: 2px dashed #eee;
}
summary[contenteditable="true"]:focus {
outline: 2px solid #4CAF50;
}
</style>
<details open>
<summary contenteditable="true">Редактируемый заголовок</summary>
<p>Содержимое этого блока можно раскрыть/скрыть, а заголовок - отредактировать.</p>
</details>
Рекомендации:
- Добавляйте визуальные подсказки для редактируемых областей
- Сочетайте с CSS для улучшения пользовательского опыта
- Ограничивайте область редактирования только необходимыми элементами
- Для сохранения изменений потребуется JavaScript
Ограничения:
- Не сохраняет изменения после перезагрузки страницы
- Ограниченные возможности форматирования
- Разные браузеры могут по-разному обрабатывать редактирование
Практический пример использования:
<details>
<summary contenteditable="true" class="editable-summary">[Измените название раздела]</summary>
<div>
<p>Этот раздел позволяет пользователям задавать собственные заголовки.</p>
<p>Идеально для пользовательских интерфейсов и панелей управления.</p>
</div>
</details>
<style>
.editable-summary {
color: #666;
font-style: italic;
padding: 5px;
border-bottom: 1px dotted #ccc;
}
.editable-summary:focus {
font-style: normal;
color: #000;
}
</style>