Отключение проверки орфографии в Chrome/Safari: HTML/CSS

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

Если красные подчёркивания в браузере вас беспокоят, установите для атрибута spellcheck значение false:

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

Таким способом, вы сможете отключить проверку орфографии для любого элемента, где это не требуется.

Процедура отключения проверки орфографии

Чтобы деактивировать проверку орфографии в HTML-формах, следует выполнить следующие действия:

1. Для каждого отдельного элемента (<input> или <textarea>) добавьте атрибут spellcheck="false".
2. Если вы хотите отключить проверку орфографии для всех элементов формы, назначьте spellcheck="false" самому тегу <form>:

<form spellcheck="false">
  <!-- Строка ввода без проверки орфографии -->
</form>

3. К сожалению, CSS не позволяет управлять проверкой орфографии, поэтому тут он ни на что не повлияет.
4. В окружении React используйте конструкцию camelCase: указывайте spellCheck={false}:

<input type="text" spellCheck={false} /> <!-- React без лишнего контроля орфографии -->

5. Для предотвращения автоматического дополнения и автокоррекции используйте autocomplete="off" и autocorrect="off".
6. Важно проверить работоспособность вашего решения в различных браузерах.

Заметки с учетом интересов пользователя

Перед внесением изменений в код:

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

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

Итак, давайте представим наш HTML/CSS в действии:

<input type="text" spellcheck="false" /> <!-- Подчёркивания исчезли! -->

Представьте вашу клавиатуру (⌨️) как неумолимого диетолога, который исключает из вашего рациона проверку орфографии (🖊️🚫):

До: ⌨️ + 🖊️🔴 = Печатаем под давлением!
После:  ⌨️ + 🖊️🚫 = Печатаем без стресса и помех.

А CSS может сделать ваш интерфейс идеальным:

input {
  /* Без лишних исправлений */
  -webkit-user-modify: read-write-plaintext-only;
}

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

Рассмотрим spellcheck поподробнее

Давайте разберёмся с атрибутом spellcheck:

• Спецификация HTML5: что говорит документ WHATWG, определяющий поведение браузеров, в том числе и в отношении проверки орфографии.
• Атрибут Spellcheck: представен в стандарте HTML5 и выполняет свою функцию безупречно.
• Браузеры: проверьте, насколько хорошо spellcheck совместим с различными браузерами.

Остерегайтесь подводных камней

Путешествуя по вебу, будьте бдительны:

• Используйте с умом: непродуманное отключение проверки может снизить удобство использования.
• Не переопределяйте пользовательские настройки: персональные настройки пользователей могут перебивать ваш атрибут spellcheck.
• Стили User Agent: не все стили браузеров доступны для изменений. Будьте внимательны в работе с редактируемыми элементами.

"Магическая сила" атрибута spellcheck

Используя spellcheck, вы можете сделать волшебство:

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

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

1. spellcheck – HTML: HyperText Markup Language | MDN — детальный обзор атрибута spellcheck на MDN.
2. HTML Global spellcheck Attribute — информация о spellcheck предоставленная W3Schools.
3. "spellcheck" | Can I use... Support tables for HTML5, CSS3, etc — ресурс «Can I use» раскрывает степень совместимости атрибута spellcheck.
4. Just a moment... — страница с подробной характеристикой spellcheck.
5. Not Found – CSS-Tricks — CSS-Tricks поделится хитростями "подавления" ненужной проверки орфографии.
6. Chromium Blog — присоединитесь к создателям Chrome и изучите все тонкости работы проверки орфографии в веб-формах.