Атрибут contenteditable тега <var>
Описание
Атрибут contenteditable позволяет сделать содержимое тега <var> редактируемым непосредственно в браузере. Это полезно для интерактивных математических выражений или редакторов кода.
<p>Редактируемая формула:
<var contenteditable="true">x</var> =
<var contenteditable="true">y</var> + 2</p>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
true |
Разрешает редактирование | Для интерактивных переменных |
false |
Запрещает редактирование | По умолчанию |
inherit |
Наследует от родителя | В сложных редактируемых блоках |
Особенности работы:
- Сохранение семантики переменной при редактировании
- Работает во всех современных браузерах
- Можно комбинировать с атрибутом
spellcheck="false" - Изменения сохраняются только в браузере
Пример с CSS-стилизацией:
<style>
var[contenteditable] {
padding: 0 0.2em;
background: #f8f9fa;
border-radius: 3px;
min-width: 1em;
display: inline-block;
}
var[contenteditable]:focus {
outline: 2px solid #4285f4;
background: #fff;
}
</style>
<p>Редактируйте переменные: <var contenteditable="true">a</var> +
<var contenteditable="true">b</var> = <var contenteditable="true">c</var></p>
Рекомендации:
- Добавляйте визуальные подсказки для редактируемых переменных
- Используйте JavaScript для сохранения изменений
- Для сложных формул рассмотрите MathML или специализированные библиотеки
- Комбинируйте с
data-*атрибутами для хранения метаданных
Ограничения:
- Нет встроенной валидации вводимых значений
- Сложно контролировать форматирование
- Не подходит для сложных математических выражений
- Изменения не сохраняются автоматически
Пример с обработкой изменений:
<div id="formula">
<var contenteditable="true" id="var-x">x</var> =
<var contenteditable="true" id="var-y">y</var> + 2
</div>
<script>
document.querySelectorAll('[contenteditable]').forEach(el => {
el.addEventListener('blur', () => {
console.log(`Изменено: ${el.textContent}`);
});
});
</script>
Важно: Для сложных редакторов формул используйте специализированные решения:
- MathJax
- KaTeX
- MathQuill