325

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

mhrabiee
  • 805
  • 10
  • 23
Michiel de Mare
  • 41,982
  • 29
  • 103
  • 134

7 Answers7

461

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.

Community
  • 1
  • 1
Eric Wendelin
  • 43,147
  • 9
  • 68
  • 92
  • 6
    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. – usr Aug 15 '09 at 22:52
  • 2
    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. – Eric Wendelin Aug 17 '09 at 17:27
  • 2
    Important to note browser compatibility -- Mobile Safari (iOS) doesn't honor the tag for instance -- http://www.wufoo.com/html5/attributes/17-spellcheck.html – radicand May 19 '13 at 13:43
  • 3
    http://stackoverflow.com/questions/3416867/how-can-i-disable-the-spell-checker-on-text-inputs-on-the-iphone has the correct answer to this (`autocorrect="off"`) for Mobile Safari - `spellcheck=` doesn't work – Chris S Dec 19 '14 at 14:27
  • 1
    should be autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck="false" – zaman Jun 19 '17 at 11:29
  • html attributes are case insensitive – Gio Jul 20 '20 at 08:38
227

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

<textarea spellcheck="false">
    ...
</textarea>
Artur INTECH
  • 6,024
  • 2
  • 37
  • 34
Ms2ger
  • 15,596
  • 6
  • 36
  • 35
  • 1
    MDN has a table showing the default value of spellcheck for different browsers and elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck – Paul Jan 31 '17 at 17:39
  • 2
    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. – Shanimal Nov 08 '17 at 22:52
  • 4
    @Shanimal Yes, react uses camel-case for DOM attributes. See https://reactjs.org/docs/introducing-jsx.html – sookie Nov 10 '17 at 15:57
18

For Grammarly you can use:

<textarea data-gramm="false" />
Alex Kolarski
  • 3,255
  • 1
  • 25
  • 35
8

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

JCOC611
  • 19,111
  • 14
  • 69
  • 90
4

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.

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Artur INTECH
  • 6,024
  • 2
  • 37
  • 34
  • 1
    +1 Read [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) on MDN, it's very useful. They allow you to have much less code for small things like this – s123 May 11 '23 at 09:39
1

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", String( 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.)

Mac
  • 1,432
  • 21
  • 27
  • 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. – s123 May 11 '23 at 07:53
0

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.
Fom
  • 485
  • 6
  • 14