Отключение проверки орфографии в HTML полях ввода

Быстрый ответ

Для того чтобы отключить проверку орфографии в элементах <input> и <textarea>, вы используете атрибут spellcheck="false". Таким образом, вы указываете браузеру пренебрегать потенциальными ошибками в данных полях.

<input type="text" spellcheck="false">
<textarea spellcheck="false"></textarea>

Отключаем все функции автозаполнения

Много способов отключения

Помимо spellcheck="false" полезно будет знать и о других атрибутах, которые помогают отключить автоматические функции: autocomplete="off", autocorrect="off" и autocapitalize="off". Эти настройки сделают ваш браузер ещё более удобным.

• autocomplete="off" > Отключаем автозаполнение. Мы ценим ваше мнение, но, возможно, можем обойтись без него!
• autocorrect="off" > Да властвует человек над автокоррекцией!
• autocapitalize="off" > Ни к чему автоматически делать каждое слово с большой буквы. Мы справимся без этого.

Подробнее об этом расскажет наш спикер на видео

Применимость к различным устройствам и элементам

Вышеуказанные атрибуты работают в настольных и мобильных браузерах, а также применимы к тегам <input> и <textarea>.

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

JavaScript велик, но он не может игнорировать настройки пользователя. JavaScript, мы признаем твои способности, но мы также уважаем волю пользователя!

Обращаясь к упрямым браузерам

Некоторые браузеры подчиняются установленным настройкам, но другие – нет. Имейте в виду, что некоторые браузеры могут игнорировать атрибут spellcheck на свое усмотрение.

Расположение атрибута – важно

spellcheck размещайте в открывающем теге элемента. Это как объявить тему вечеринки ещё до того, как гости пришли.

Прежде чем отключать

Подумайте, действительно ли это хорошее решение с точки зрения пользовательского опыта? Мы можем облегчить жизнь пользователям, так не лишайте их полезных инструментов без явной на то необходимости!

Визуализация

Отключение проверки орфографии можно уподобить отправке личного письма, которое не подразумевает внешних поправок.

Без `spellcheck="false"`:          С `spellcheck="false"`:
🖊️📝➡️🔍✉️                           🖊️📝🔒✉️

spellcheck="false" работает как печать, защищающая ваше сообщение от сторонних "правок".

Проверяем совместимость

Не забудьте протестировать совместимость атрибутов с различными браузерами, чтобы избежать ненужных сюрпризов.

Автокоррекция мобильных браузеров

Мобильные браузеры, особенно на iOS, могут быть чрезмерно настойчивыми в поправках. autocorrect="off" умеряет их рвение.

Одобрено HTML5

Атрибут spellcheck поддерживается официальной спецификацией HTML5, так что это не хак, а нормальная практика.

Важность доступности

Помните о влиянии отключения функций на доступность интерфейсов. Некоторым пользователям это может затруднить работу. Это похоже на удаление поручней на лестнице.

Информирование пользователей

Если вы решите отключить проверку орфографии, уведомите пользователей об этом, предоставьте им подсказки или метки, чтобы они знали, чего ожидать. Это как предупреждение о неработающем лифте.

Полезные материалы

1. spellcheck – HTML | MDN — Подробное руководство по атрибуту spellcheck на MDN.
2. HTML spellcheck Attribute | W3Schools — Простое и понятное объяснение атрибута от W3Schools.
3. HTML Standard | WHATWG — Детали о spellcheck от WHATWG.
4. Can I use... Support tables for HTML5 — Таблицы поддержки браузеров, которые позволяют отслеживать актуальный статус атрибута.
5. WebAIM: Creating Accessible Forms — Статья об влиянии настройки элементов формы на их доступность.
6. How can I disable the spell checker on text inputs on the iPhone | Stack Overflow — Советы от профессионалов для решения проблем с проверкой орфографии на мобильных устройствах.