Атрибут contenteditable тега <small>
Описание
Атрибут contenteditable позволяет сделать содержимое элемента <small> редактируемым прямо в браузере. Это полезно для создания интерактивных интерфейсов, где пользователь может изменять вспомогательный текст.
Пример использования:
<p>Основной текст</p>
<small contenteditable="true">Редактируемый пояснительный текст</small>
Значения атрибута:
| Значение | Описание |
|---|---|
true |
Разрешает редактирование содержимого |
false |
Запрещает редактирование (по умолчанию) |
plaintext-only |
Разрешает только простой текст (без форматирования) |
Особенности работы:
- При редактировании сохраняет семантику элемента
<small> - Можно комбинировать с атрибутом
spellcheck - Изменения не сохраняются автоматически - требуется JavaScript
- Поддерживает все основные операции редактирования текста
Стилизация редактируемого элемента:
<style>
small[contenteditable="true"] {
display: inline-block;
padding: 2px 5px;
border-bottom: 1px dashed #999;
min-width: 100px;
}
small[contenteditable="true"]:focus {
outline: none;
background-color: #f5f5f5;
border-bottom-color: #4a90e2;
}
</style>
<small contenteditable="true">Редактируемый текст</small>
Рекомендации:
- Используйте для:
- Пояснительных примечаний
- Временных комментариев
- Пользовательских аннотаций
- Сочетайте с JavaScript для сохранения изменений
- Предоставляйте визуальные подсказки редактируемости
- Для сложного редактирования используйте специализированные редакторы
Ограничения:
- Разные браузеры могут по-разному реализовывать редактирование
- Ограниченные возможности форматирования
- Требуется дополнительный код для сохранения изменений
- На мобильных устройствах могут быть проблемы с фокусом
Доступность:
<small contenteditable="true" aria-label="Редактируемое примечание" role="textbox">
Текст можно изменить
</small>