Атрибут contenteditable тега <dt>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <dt> редактируемым непосредственно в браузере. Это полезно для создания интерактивных интерфейсов без использования форм.
Особенность: При использовании с
Пример использования:
<dt> рекомендуется также сделать редактируемым связанный <dd> для сохранения целостности данных.
<dl>
<dt contenteditable="true">HTML</dt>
<dd contenteditable="true">Язык гипертекстовой разметки</dd>
<dt contenteditable="true">CSS</dt>
<dd contenteditable="true">Каскадные таблицы стилей</dd>
</dl>
Допустимые значения:
| Значение | Описание |
|---|---|
true |
Разрешает редактирование содержимого |
false |
Запрещает редактирование (по умолчанию) |
plaintext-only |
Разрешает только простой текст (экспериментальное) |
Практическое применение:
<dl id="editable-glossary">
<dt contenteditable="true" class="term">JavaScript</dt>
<dd contenteditable="true">Язык программирования для веб-страниц</dd>
</dl>
<button onclick="saveChanges()">Сохранить изменения</button>
<script>
function saveChanges() {
const dl = document.getElementById('editable-glossary');
const terms = [...dl.querySelectorAll('dt')];
const definitions = [...dl.querySelectorAll('dd')];
const updatedData = terms.map((term, i) => ({
term: term.textContent,
definition: definitions[i].textContent
}));
console.log('Обновленные данные:', updatedData);
alert('Изменения сохранены!');
}
</script>
Стилизация редактируемых элементов:
<style>
[contenteditable="true"] {
padding: 5px;
border: 1px dashed transparent;
transition: all 0.2s;
}
[contenteditable="true"]:hover {
background-color: #f8f9fa;
border-color: #dee2e6;
}
[contenteditable="true"]:focus {
outline: none;
background-color: #fff;
border: 1px solid #86b7fe;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}
.term {
font-weight: bold;
color: #0d6efd;
}
</style>
<dl>
<dt contenteditable="true" class="term">API</dt>
<dd contenteditable="true">Интерфейс программирования приложений</dd>
</dl>
Рекомендации по использованию:
- Всегда предусматривайте способ сохранения изменений (кнопка, автосохранение)
- Добавляйте визуальные подсказки для редактируемых элементов
- Ограничивайте форматирование при необходимости (
data-gramm="false"для Grammarly) - Для сложных редакторов используйте специализированные библиотеки
- Учитывайте доступность (добавляйте ARIA-атрибуты)
Пример с ограничением форматирования:
<dl>
<dt
contenteditable="true"
data-gramm="false"
data-cke-editable="1"
spellcheck="false"
>HTML</dt>
<dd contenteditable="true">Язык гипертекстовой разметки</dd>
</dl>
Ограничения и особенности:
- Разные браузеры могут поддерживать разное поведение
- Сложно контролировать вводимое содержимое
- Нет встроенной возможности отмены изменений (Ctrl+Z работает только в текущей сессии)
- Требуется дополнительный код для сохранения изменений
Примечание: Хотя contenteditable предоставляет простой способ сделать содержимое редактируемым, для production-решений часто лучше использовать специализированные редакторы (TinyMCE, CKEditor и др.), которые решают многие проблемы этого атрибута.