Атрибут spellcheck включает или выключает проверку орфографии в редактируемом тексте. Это глобальный атрибут - его можно прописать любому тегу, но реальный эффект он даёт только там, где текст можно редактировать: в <textarea>, в полях ввода и в элементах с contenteditable.
<textarea spellcheck="true">Текст с ошибками подчеркнёт браузер</textarea>В этой статье
- Атрибут spellcheck в HTML: что делает и какие значения принимает
- Что проверяется без атрибута: textarea, input и contenteditable
- Наследование spellcheck от родителя
- Это подсказка браузеру, а не гарантия проверки
- Безопасность: зачем иногда выключать spellcheck намеренно
- Частые ошибки с атрибутом spellcheck
- Шпаргалка по атрибуту spellcheck
Атрибут spellcheck в HTML: что делает и какие значения принимает
spellcheck принимает всего два значения - true и false, и оба нужно прописывать явно: в этом его отличие от булевых атрибутов, где достаточно самого имени.
| Значение | Что происходит |
|---|---|
| true (или пустая строка) | Элемент проверяется на орфографические ошибки, если это вообще возможно |
| false | Проверка выключена для этого элемента |
| Атрибут не указан | Поведение зависит от конкретного элемента и браузера - подробнее в следующем разделе |
Пример: spellcheck="true" и spellcheck="false" рядом
Подчёркивание рисует браузер и операционная система - в этом встроенном демо оно может не показаться, но в самой статье сработает в любом обычном браузере.
Что проверяется без атрибута: textarea, input и contenteditable
Без явного атрибута решение принимает браузер - и здесь легко ошибиться: распространённое мнение, что <input> по умолчанию не проверяется, а проверяются только <textarea> и contenteditable. На деле это не так: у большинства типов <input> (text, email, url, search, number и других) проверка по умолчанию включена точно так же, как у textarea и contenteditable. Исключение - type="password": у него проверка орфографии отключена браузером по умолчанию, что логично - проверять орфографию в пароле бессмысленно.
Пример: свойство .spellcheck у разных полей без атрибута
Единственное исключение - password: у остальных полей и у contenteditable проверка включена сама по себе, даже без атрибута в разметке.
Наследование spellcheck от родителя
Если у элемента нет собственного атрибута spellcheck, он наследует состояние от ближайшего предка, у которого оно задано явно. Это удобно, когда нужно выключить проверку сразу для целого блока формы, не прописывая false на каждом поле отдельно - достаточно поставить spellcheck="false" на общий контейнер.
Пример: наследование от родительского контейнера
<div spellcheck="false">
<div contenteditable="true">Наследует false от родителя</div>
</div>У вложенного блока нет своего атрибута - он берёт значение от ближайшего предка, где оно указано явно.
Это подсказка браузеру, а не гарантия проверки
Спецификация прямо описывает spellcheck как подсказку браузеру, а не требование: браузер не обязан проверять орфографию, даже если атрибут равен true. На нередактируемых элементах (обычный текст, заголовок, абзац без contenteditable) проверка не включается в принципе, сколько ни прописывай им spellcheck="true" - проверять там попросту нечего, текст нельзя изменить.
Безопасность: зачем иногда выключать spellcheck намеренно
Обычная проверка орфографии в браузере работает локально, по встроенному словарю, и ничего никуда не отправляет. Но у части браузеров есть режим «расширенной» проверки, который присылает содержимое поля на сервер - и в прошлом это становилось источником реальных утечек: в поля с паролями и платёжными данными такая проверка иногда попадала вместе с остальным текстом формы, если браузер не делал для них исключения. Из соображений безопасности на полях с чувствительными данными - пароль, номер карты, код из смс - spellcheck="false" лучше прописывать явно, а не полагаться на то, что браузер и так выключит проверку по умолчанию.
Частые ошибки с атрибутом spellcheck
С самим атрибутом spellcheck путаницы немного - сложности начинаются там, где от него ожидают больше, чем он даёт.
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Пишут spellcheck без значения и ждут ошибку валидатора | Пустая строка - допустимое значение, равнозначное true, это не ошибка разметки | Писать явно true или false, если нужна конкретика, а не полагаться на короткую запись |
| Прописывают spellcheck="true" на обычный текстовый блок без contenteditable | Элемент нередактируем, проверять в нём нечего - атрибут не даёт никакого эффекта | Применять spellcheck только к редактируемым элементам: textarea, input, contenteditable |
| Считают, что все input по умолчанию не проверяются | На деле не проверяется по умолчанию только type="password" - остальные типы проверяются как textarea | Для чувствительных полей (не только пароль) выключать проверку явным false |
| Ожидают, что spellcheck="true" гарантированно подчеркнёт ошибки | Это лишь подсказка - конкретный браузер и ОС вправе вообще не проверять орфографию | Не полагаться на spellcheck как на обязательную проверку текста |
| Не выключают spellcheck на полях с паролями и номерами карт | Расширенная проверка орфографии в части браузеров отправляет текст поля на сервер | Прописывать spellcheck="false" явно на всех чувствительных полях |
Шпаргалка по атрибуту spellcheck
| Правило | Что запомнить |
|---|---|
| Где работает | На любом теге (глобальный атрибут), эффект - только на редактируемых |
| true / пустая строка | Проверка орфографии включена, если браузер её поддерживает |
| false | Проверка выключена для этого элемента |
| Атрибут не указан | textarea, input (кроме password) и contenteditable проверяются по умолчанию |
| type="password" | Единственный тип input, не проверяемый по умолчанию |
| Наследование | Элемент без своего атрибута берёт значение ближайшего предка |
| Гарантия | Это подсказка браузеру, а не обязательная проверка |
| Безопасность | На полях с паролями, картами, кодами прописывать spellcheck="false" явно |
