Атрибут spellcheck тега <summary>
Описание
Атрибут spellcheck определяет, должна ли проверяться орфография текста внутри элемента <summary> при его редактировании. Работает только в сочетании с атрибутом contenteditable.
<details>
<summary contenteditable="true" spellcheck="true">Редактируемый заголовок с проверкой орфографии</summary>
<p>Содержимое блока...</p>
</details>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
true |
Включить проверку орфографии | Для редактируемых текстовых элементов |
false |
Отключить проверку орфографии | Для элементов с кодом, именами собственными |
Особенности работы:
- Требует наличия атрибута
contenteditable="true" - Использует словарь браузера (зависит от настроек языка)
- Работает только в поддерживающих браузерах
- Не влияет на нередактируемые элементы
Пример с разными языками:
<details>
<summary contenteditable="true" spellcheck="true" lang="en">Editable english text</summary>
<p>English content</p>
</details>
<details>
<summary contenteditable="true" spellcheck="true" lang="ru">Редактируемый русский текст</summary>
<p>Содержимое на русском</p>
</details>
Рекомендации:
- Всегда указывайте атрибут
langдля правильной проверки - Отключайте проверку для элементов с кодом или специальными терминами
- Используйте вместе с CSS для визуального выделения редактируемых областей
- Тестируйте в разных браузерах
Ограничения:
- Поддержка зависит от браузера и его настроек
- Не работает одинаково на всех платформах
- Не заменяет профессиональные системы проверки орфографии
- Может некорректно работать со смешанными языками
Пример с отключенной проверкой:
<details>
<summary contenteditable="true" spellcheck="false">var x = 10; // Код не проверяется</summary>
<pre>Пример кода...</pre>
</details>
Примечание: Для сложных сценариев редактирования текста рассмотрите использование специализированных библиотек вроде TinyMCE или CKEditor.