Атрибут contenteditable тега <dfn>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента редактируемым прямо в браузере. Применительно к тегу <dfn> (который используется для определения терминов), это дает возможность пользователям корректировать или уточнять определения непосредственно на странице.
<dfn contenteditable="true">HTML</dfn> - это язык разметки для создания веб-страниц.
<dfn contenteditable="false">CSS</dfn> - язык стилей, этот термин нельзя редактировать.
<dfn contenteditable>JavaScript</dfn> - язык программирования для веб-страниц.
Значения атрибута:
| Значение | Описание | Результат |
|---|---|---|
true |
Разрешает редактирование | Контент можно изменять |
false |
Запрещает редактирование | Контент нельзя изменить (по умолчанию) |
| Пустая строка или без значения | Эквивалентно true |
Контент можно изменять |
Сохранение изменений:
<dfn id="editable-term" contenteditable>API</dfn> - интерфейс программирования приложений.
<button onclick="saveDefinition()">Сохранить изменения</button>
<script>
function saveDefinition() {
const term = document.getElementById('editable-term');
localStorage.setItem('apiDefinition', term.innerHTML);
alert('Определение сохранено!');
}
// Восстановление при загрузке
window.onload = function() {
const savedDef = localStorage.getItem('apiDefinition');
if (savedDef) {
document.getElementById('editable-term').innerHTML = savedDef;
}
};
</script>
Стилизация редактируемого элемента:
<style>
dfn[contenteditable="true"] {
border-bottom: 1px dashed #666;
padding: 2px 4px;
background-color: #f8f9fa;
}
dfn[contenteditable="true"]:focus {
outline: 2px solid #4CAF50;
background-color: #fff;
}
</style>
<dfn contenteditable>SEO</dfn> - поисковая оптимизация.
Рекомендации по использованию:
- Используйте для терминов, которые могут требовать уточнения пользователями
- Сочетайте с JavaScript для сохранения изменений между сессиями
- Обеспечьте визуальную обратную связь для редактируемых элементов
- Не используйте для критически важной информации без механизма проверки правок
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Изменения не сохраняются автоматически при обновлении страницы
- Форматирование сохраняется только при использовании
innerHTML - Не влияет на SEO, так как изменения происходят только на стороне клиента
Примечание: Атрибут contenteditable особенно полезен в образовательных проектах или системах, где пользователи могут коллективно уточнять определения. Для серьезных проектов рассмотрите использование полноценных CMS или систем контроля версий для отслеживания изменений.