CODEWITHSUNDEEP
htmlcssinputtextareaspell-checking
tybro0103
tybro0103

Reputation: 49693

How does one disable spellcheck on input type=text?

I'd like to disable the spellcheck on my textfields <input type="text"> so as not to have any ugly red squigglies.

I understand others have asked this same question, but they always make the answer of putting spellcheck=false as accepted. That is not correct. That only works on a textarea, not input.

I'd like it to work in chrome at least.

Upvotes: 20

Views: 13062

Answers (7)

Mandera
Mandera

Reputation: 2992

For emails

Use readonly instead of spellcheck=false

This gets you a nice copyable text that can be selected with ctrl+a without the red squiggly lines.

<input type="text" value="token-to-copy-here" readonly />

Upvotes: 0

southerton81
southerton81

Reputation: 1109

Also note, that when referencing from React/jsx the property name should be with capital C letter spellCheck="false"

Upvotes: 0

chuck911
chuck911

Reputation: 785

Updated Jan 2020

spellcheck=false and spellcheck="false" now both work in Chrome.

Original answer:

While spellcheck=false doesn't work in Chrome as mentioned in the question, spellcheck="false" works successfully.

Upvotes: 20

bortunac
bortunac

Reputation: 4808

<table spellcheck="false"> ....
     <td><textarea> blabla </textarea></td> ....
     ....... <td><textarea> xxxxx </textarea></td>
</table>

works for FF CH

Upvotes: 0

HydraHatRack
HydraHatRack

Reputation: 1300

You can use either spellcheck=false or spellcheck="false" in an <input type="text">. This is a slight update to other answers posted.

jsfiddle.net/8nc2w6e0

Tested on Chrome 39.0.2171.95.

Upvotes: 1

BalusC
BalusC

Reputation: 1108642

From http://blog.whatwg.org/the-road-to-html-5-spellchecking#compatibility:

Google Chrome offers as-you-type spellcheck on <textarea> elements but not <input type=text> elements. It ignores the spellcheck attribute entirely. It does not offer the end user the option to change the default behavior or manually check individual fields.

So, it ends here.

Update: since Chrome 13 (released August 2011, 3 months after this answer), it's also supported on <input> elements.

Upvotes: 15

mrec
mrec

Reputation: 768

I'm sure BalusC's answer was accurate at the time, but I think it's out of date. I'm testing this right now in Chrome 31.0.1650.57 on Win7, and spellcheck="false" definitely suppresses the dreaded red squigglies in an <input type="text">.

In general I agree that you shouldn't do this, but there are exceptions to any rule. (In my case, the input is expecting base64.)

Upvotes: 0

Related Questions