How does one disable spellcheck on input type=text?

Question

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.

Whitfield

What browser do you see spell check on input elements? Also, no need to shout. – Bioscope

#4524500 – Bethink

Also make a text area which is one row and cannot be resized and BAM text box. – Pancake

Answer 1

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.

Meenen

I would not worry about this. It's enduser's own choice to spellcheck input fields. You should not force the browser to behave different on your site. I have immediately disabled spellchecking myself anyway. – Meenen

@Meenen That is just stupid, there are enough reasons to disable accessibility options. For example if you do the spelling check yourself, same goes with the focus glow around buttons which you might want to handle yourself. Or maybe a practice application in JavaScript in which you want to see how well somebody can spell stuff as a matter of a test and there are many more reasons. Thus you should be able to force it, and luckily it is possible. – Kaslik

This answer is deprecated. – Pederasty

@Sebas: I believe you meant to say "outdated" :) – Meenen

Answer 2

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.

Julian

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. – Cosmography

@JamesDonnelly the answer is short - spellcheck="false" . but I can't post too short answer. this is not "critique or request clarification from an author",this is answer – Julian

This answer isn't correct and is more of a comment than an answer. You don't need to wrap HTML attributes in quotes, and the spellcheck property is designed specifically for textarea elements. – Cosmography

@JamesDonnelly try it in your chrome yourself ! – Julian

the spellcheck attribute doesn't affect input elements in Chrome. Setting it to true or false will not achieve anything. – Cosmography

@JamesDonnelly May be surprising, but it does work now (I'm on Chrome 31.0.1650.34). jsfiddle.net/vr9pR - Type in some misspelled words in the two boxes. – Selry

Works for me too. I'm happy with your answer @chuck911. – Traitorous

Note that the question explicitly says that it works on textarea fields, not on input fields. So it's very reasonable to assume that the OP just quickly entered the unquoted attribute value off top of head for the sake of asking a question rather than actually having used an unquoted attribute value as such. – Meenen

Answer 3

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.

Craps

Answer 4

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.)

Toussaint

Answer 5

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

works for FF CH

Globetrotter

Answer 6

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

Disarticulate

Answer 7

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 />

Corrasion