Атрибут spellcheck тега <div>

Описание

Атрибут spellcheck определяет, должна ли проверяться орфография текста внутри элемента <div>. Это булевый атрибут, который можно явно включать или отключать.

Пример использования:
<div contenteditable="true" spellcheck="true"> Этот текст будет проверяться на орфографические ошибки (подчеркивание красным). </div> <div contenteditable="true" spellcheck="false"> Этот текст НЕ будет проверяться на ошибки. </div>

Варианты значений:

Значение Описание Поведение
true Включена проверка Орфография проверяется, ошибки подчеркиваются
false Выключена проверка Орфография не проверяется
Отсутствует По умолчанию Наследует поведение родителя или браузера

Важные особенности:

  • Работает только для редактируемых элементов (с contenteditable="true" или полей формы)
  • Поддержка зависит от браузера и его настроек
  • Не влияет на нередактируемый контент

Практический пример:

<div contenteditable="true" spellcheck="true" lang="en"> Try to write something with misstakes here. </div> <div contenteditable="true" spellcheck="true" lang="ru"> Попробуйте написать что-нибудь с ошыбками здесь. </div>

Динамическое управление:

<div id="editable-div" contenteditable="true"> Этот блок можно переключать между режимами проверки. </div> <button onclick="toggleSpellCheck()">Переключить проверку орфографии</button> <script> function toggleSpellCheck() { const div = document.getElementById('editable-div'); div.spellcheck = !div.spellcheck; alert('Проверка орфографии: ' + (div.spellcheck ? 'ВКЛ' : 'ВЫКЛ')); } </script>

Советы по использованию:

  • Всегда указывайте язык с атрибутом lang для правильной проверки
  • Для текстовых полей формы лучше использовать <textarea spellcheck>
  • Не полагайтесь только на браузерную проверку - реализуйте серверную валидацию
  • Учитывайте, что пользователи могут отключать проверку в настройках браузера

Ограничения:

  • Не поддерживается в некоторых мобильных браузерах
  • Словарь проверки зависит от браузера и ОС
  • Нельзя кастомизировать внешний вид подчеркивания ошибок
  • Нет доступа к списку предложений через JavaScript

Пример с CSS (ограниченная стилизация):

<style> div[spellcheck="true"] { background-color: #f8f9fa; padding: 10px; border: 1px dashed #ccc; } </style> <div contenteditable="true" spellcheck="true"> Этот блок визуально выделен когда проверка орфографии включена. </div>

Примечание: Атрибут spellcheck полезен для веб-редакторов и приложений, где пользователи вводят текст. Однако это лишь базовая проверка - для профессиональных решений рассмотрите специализированные библиотеки проверки орфографии.