Отключить проверку орфографии Chrome / Safari с помощью HTML / css

126

Есть ли способ для веб-разработчика отключить проверку орфографии Chrome / Safari / WebKit для определенных элементов inputили textarea? Я имею в виду либо специальный атрибут тега, либо проприетарную инструкцию CSS.

Есть инструкция CSS для отключения выделения inputs, поэтому я подумал, что она тоже может существовать. Я знаю, как это может сделать пользователь.

Или я как пользователь могу отключить его для определенного домена?

html css google-chrome spell-checking tillda
источник
3
Точная копия Отключить проверку орфографии в текстовых полях HTML на ~ 5 лет. Думаю, модераторы были заняты закрытием более законных вопросов.
Дэн Даскалеску 07

Ответы:

211

Да, есть атрибут проверки орфографии HTML5.

<textarea spellcheck="false"> или <input type="text" spellcheck="false">

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#spelling-and-grammar-checking

Обновление: теперь это поддерживается в последних версиях всех браузеров.

Gaurav
источник
Похоже, это не работает в Safari Mobile. У меня есть ввод, который я хочу отключить, и iPad продолжает предлагать варианты правописания, даже если для атрибута проверки орфографии установлено значение FALSE. :(
ThiagoPXP 06
Не делал этого в chrome android 67: /
Ray Foss
36

Это работает в Safari 7.1 и должно работать также в других:

<input autocomplete="off" autocorrect="off" autocapitalize="off" 
spellcheck="false"/>

Только spellcheck="false"не сработало.

Тимо Кяхконен
источник
7

для всех элементов формы можно и так:

<form spellcheck="false" .. />
MTM
источник
3

Что касается выделения тегов ввода: не делайте этого, это визуальный сигнал для пользователей.

Но если вы должны:

#your-input{outline:none;}
Камило Мартин
источник
3
Если вы избавляетесь от контура, это обычно происходит потому, что у вас уже есть другие визуальные подсказки, :focusи контур им мешает; оставление значения по :focusумолчанию вызывает разрыв между различными браузерами. stackoverflow.com/questions/71074/… также может быть полезен в этом случае.
Hawken
2
@Hawken Я видел, как несколько сайтов удаляли визуальные подсказки и не предлагали никакой замены. Я нормально отношусь к индивидуальным репликам, но они должны быть.
Камило Мартин
1
Вопрос касается волнистой линии внутри текстового поля, когда проверка орфографии считает, что вводимые данные ошибочны, а не очертания, если я не ошибаюсь. Тем не менее, ваш ответ - полезная информация.
MrBoJangles
2

В React вам нужно spellCheckвместо этого использовать .

<input spellCheck={false} type="text"/>
Пол Разван Берг
источник