Атрибут contenteditable тега <tt>
Описание
Атрибут contenteditable для тега <tt> позволяет сделать моноширинный текст редактируемым непосредственно в браузере. Хотя тег <tt> считается устаревшим, эта функциональность может быть полезна для создания простых текстовых редакторов кода.
<tt contenteditable="true" style="font-family: monospace; display: block; padding: 10px; border: 1px solid #ddd;">
Можно редактировать этот моноширинный текст...
</tt>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
true |
Разрешает редактирование содержимого | Для интерактивных текстовых областей |
false |
Запрещает редактирование (по умолчанию) | Для статического контента |
inherit |
Наследует значение от родителя | В сложных иерархиях элементов |
Практическое применение с CSS:
<style>
.editable-code {
font-family: 'Courier New', monospace;
background: #f5f5f5;
padding: 15px;
border: 1px solid #ccc;
border-radius: 4px;
min-height: 100px;
white-space: pre;
}
</style>
<tt contenteditable="true" class="editable-code">
function example() {
// Попробуйте отредактировать этот код
return "Hello World";
}
</tt>
Особенности работы:
- Сохранение форматирования при редактировании
- Поддержка стандартных команд редактирования (Ctrl+B, Ctrl+I и т.д.)
- Возможность получить измененное содержимое через JavaScript
- Работает во всех современных браузерах
Ограничения и рекомендации:
- Тег <tt> устарел в HTML5 - используйте <code> или <pre>
- Для сложных редакторов лучше использовать специализированные библиотеки
- Не сохраняет изменения автоматически
- Может потребоваться дополнительная обработка пробелов и переносов
Примечание: Для создания полноценных редакторов кода рассмотрите использование таких библиотек как CodeMirror или Monaco Editor.