Атрибут contenteditable тега <button>
Описание
Атрибут contenteditable позволяет сделать текст внутри кнопки редактируемым прямо на странице. Это может быть полезно для интерактивных интерфейсов, где нужно быстро изменить текст кнопки без перезагрузки страницы.
<button contenteditable="true">
Нажмите, чтобы изменить текст
</button>
| Значение | Поведение | Применение |
|---|---|---|
true |
Разрешает редактирование | Интерактивные элементы управления |
false |
Запрещает редактирование (по умолчанию) | Обычные кнопки |
inherit |
Наследует от родителя | Для вложенных элементов |
Практический пример с сохранением изменений:
<button id="editable-btn" contenteditable="true">
Редактируемый текст
</button>
<button onclick="saveText()">Сохранить</button>
<script>
function saveText() {
const btnText = document.getElementById('editable-btn').innerText;
console.log('Новый текст кнопки:', btnText);
// Отправка на сервер или сохранение в хранилище
}
</script>
Особенности и ограничения:
- Не изменяет значение кнопки (атрибут value), только отображаемый текст
- Редактирование сохраняется только в DOM, не влияет на исходный HTML
- Для сохранения изменений требуется JavaScript
- Может конфликтовать с обработчиками событий кнопки
Стилизация редактируемой кнопки:
<style>
button[contenteditable="true"] {
min-width: 150px;
border: 1px dashed #999;
outline: none;
}
button[contenteditable="true"]:focus {
background-color: #f0f0f0;
}
</style>
<button contenteditable="true">
Настройте текст
</button>
Примечание: Хотя технически возможно сделать кнопку редактируемой, это противоречит стандартным паттернам UX. Рассмотрите альтернативы - например, поле ввода с кнопкой "Применить".