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.
Yes, use spellcheck="false", as defined by HTML5, for example:
<textarea spellcheck="false">
...
</textarea>
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.)
The following code snippet disables it for all textarea and input[type=text] elements:
(function () {
function disableSpellCheck() {
let selector = 'input[type=text], textarea';
let textFields = document.querySelectorAll(selector);
textFields.forEach(
function (field, _currentIndex, _listObj) {
field.spellcheck = false;
}
);
}
disableSpellCheck();
})();
An IFrame WILL "trigger" the spell checker (if it has content-editable set to true) just as a textfield, at least in Chrome.
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.)
The following code snippet disables it for all textarea and input[type=text] elements:
(function () {
function disableSpellCheck() {
let selector = 'input[type=text], textarea';
let textFields = document.querySelectorAll(selector);
textFields.forEach(
function (field, _currentIndex, _listObj) {
field.spellcheck = false;
}
);
}
disableSpellCheck();
})();
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.
An IFrame WILL "trigger" the spell checker (if it has content-editable set to true) just as a textfield, at least in Chrome.
Yes, use spellcheck="false", as defined by HTML5, for example:
<textarea spellcheck="false">
...
</textarea>
For Grammarly you can use:
<textarea data-gramm="false" />
Source: Stackoverflow.com