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

Описание

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

Пример использования:
<dialog id="feedbackDialog"> <h3>Оставить отзыв</h3> <div contenteditable="true" spellcheck="true" class="editable-area"> Напишите ваш отзыв здесь... </div> <button>Отправить</button> </dialog> <!-- Диалог с отключенной проверкой для технических терминов --> <dialog id="codeDialog"> <div contenteditable="true" spellcheck="false"> function example() { return "Это код, не проверять орфографию"; } </div> </dialog>

Значения атрибута:

Значение Описание Когда использовать
true Включить проверку орфографии Для обычного текста, комментариев, сообщений
false Отключить проверку орфографии Для кода, технических терминов, специальных обозначений
Не указан Наследует настройки родителя По умолчанию зависит от браузера и элемента

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

<dialog id="smartDialog"> <div id="editableContent" contenteditable="true"> Редактируемая область </div> <button onclick="toggleSpellcheck()">Переключить проверку</button> </dialog> <script> function toggleSpellcheck() { const editor = document.getElementById('editableContent'); editor.spellcheck = !editor.spellcheck; alert('Проверка орфографии: ' + (editor.spellcheck ? 'включена' : 'выключена')); } </script>

Особенности работы:

  • Работает только с редактируемыми элементами (contenteditable="true" или <textarea>)
  • Эффективность зависит от словарей браузера
  • Для правильной работы должен быть указан язык контента (lang)
  • Подчеркивание ошибок может различаться в разных браузерах

Совместное использование с языком:

<dialog lang="en"> <div contenteditable="true" spellcheck="true"> This text will be checked for English spelling mistakes. </div> </dialog> <dialog lang="ru"> <div contenteditable="true" spellcheck="true"> Этот текст будет проверяться на русские орфографические ошибки. </div> </dialog>

Рекомендации по использованию:

  • Включайте проверку для пользовательского ввода (формы, комментарии)
  • Отключайте для технических данных (код, команды, специальные термины)
  • Для многоязычных диалогов используйте динамическое изменение языка
  • Тестируйте в разных браузерах (проверка может работать по-разному)
  • Сочетайте с CSS для визуального выделения ошибок

Стилизация проверки орфографии:

<style> /* Стиль для подчеркивания орфографических ошибок */ [spellcheck="true"] { --spellcheck-color: #e53e3e; } [spellcheck="true"]:not(:focus)::spelling-error { text-decoration: wavy underline var(--spellcheck-color); } </style> <dialog> <div contenteditable="true" spellcheck="true"> Текст с возможными ашибками </div> </dialog>

Примечание: Хотя встроенная проверка орфографии полезна для базовых сценариев, для профессиональных решений (например, текстовых редакторов в диалогах) рассмотрите использование специализированных библиотек проверки орфографии, которые предлагают больше возможностей для настройки и управления.