Disable spell-checking on HTML textfields

Question

Can I somehow disable spell-checking on HTML textfields (as seen in e.g. Safari)?

Stearin

Answer 1

Update: As suggested by a commenter (additional credit to How can I disable the spell checker on text inputs on the iPhone), use this to handle all desktop and mobile browsers.

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

Original answer: Javascript cannot override user settings, so unless you use another mechanism other than textfields, this is not (or shouldn't be) possible.

Helman

why has this been accepted? it does not make sense because it can override the users settings if the browser allows it. see ms2ger's answer. – Tempera

Just because it was the best answer at the time. I'm guessing Michiel hasn't gone back through and marked the other one as correct. That would be fine with me since it is a better answer. – Helman

Important to note browser compatibility -- Mobile Safari (iOS) doesn't honor the tag for instance -- wufoo.com/html5/attributes/17-spellcheck.html – Mossback

#3417367 has the correct answer to this (autocorrect="off") for Mobile Safari - spellcheck= doesn't work – Salvucci

should be autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" – Muzz

html attributes are case insensitive – Intertidal

Answer 2

Yes, use spellcheck="false", as defined by HTML5, for example:

<textarea spellcheck="false">
    ...
</textarea>

Perception

MDN has a table showing the default value of spellcheck for different browsers and elements: developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/… – Ironhanded

I'm getting an error "Unknown DOM property spellcheck. Did you mean spellCheck?" Using spellCheck seems to satisfy it. Could just be a react-dom thing. – Grandiloquence

@Grandiloquence Yes, react uses camel-case for DOM attributes. See reactjs.org/docs/introducing-jsx.html – Lynn

Answer 3

For Grammarly you can use:

<textarea data-gramm="false" />

Cholera

Answer 4

An IFrame WILL "trigger" the spell checker (if it has content-editable set to true) just as a textfield, at least in Chrome.

Subdebutante

+1 for "content-editable set to true" trick that 's the real trick – Uvulitis

Answer 5

JavaScript-based solution:

The following code snippet disables spell checking on all textarea and input[type=text] elements:

document.querySelectorAll('input[type=text], textarea').forEach(field => field.spellcheck = false);

2023 Update: @Ms2ger's HTML version is better if you don't need JavaScript.

Redwood

+1 Read this on MDN, it's very useful. They allow you to have much less code for small things like this – Oxyacetylene

Answer 6

While specifying spellcheck="false" in the < tag > will certainly disable that feature, it's handy to be able to toggle that functionality on and off as needed after the page has loaded. So here's a non-jQuery way to set the spellcheck attribute programmatically:

𝑯𝑻𝑴𝑳:

<textarea id="my-ta" spellcheck="whatever">abcd dcba</textarea>

𝑱𝑨𝑽𝑨𝑺𝑪𝑹𝑰𝑷𝑻:

function setSpellCheck( mode ) {
    var myTextArea = document.getElementById( "my-ta" )
        , myTextAreaValue = myTextArea.value
    ;
    myTextArea.value = '';
    myTextArea.setAttribute( "spellcheck", mode );
    myTextArea.value = myTextAreaValue;
    myTextArea.focus();
}

𝑼𝑺𝑨𝑮𝑬:

setSpellCheck( true );
setSpellCheck( 'false' );

The function argument may be either boolean or string.

No need to loop through the textarea contents, we just cut 'n paste what's there, and then set focus.

Tested in blink engines (Chrome(ium), Edge, etc.)

Elledge

Why are you making the value be an empty string and then make it what is was before? You also do myTextArea.spellCheck = mode instead of setAttribute and it will convert it to string automatically. – Oxyacetylene

Resetting the value triggers the dynamic spell checking. – Elledge

Answer 7

If you have created your HTML element dynamically, you'll want to disable the attribute via JS. There is a little trap however:

When setting elem.contentEditable you can use either the boolean false or the string "false". But when you set elem.spellcheck, you can only use the boolean - for some reason. Your options are thus:

elem.spellcheck = false;

Or the option Mac provided in his answer:

elem.setAttribute("spellcheck", "false"); // Both string and boolean work here. 

Janis