Disable Spell-Checking on HTML Textfields

Disable spell-checking on HTML textfields

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.

How does one disable spellcheck on input type=text?

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.

How can I disable the spell checker on text inputs on the iPhone

As noted by my buddy Jonathan Stark, you should be able to use attributes like autocorrect and autocomplete to achieve the effect you're looking for:

<input type="text" placeholder="My Field" name="myfield"
    autocapitalize="none" autocorrect="off" autocomplete="off" />

Just tested in OS4 and it's working.

UPDATE: As of iOS5 on and off values in autocapitalize have been deprecated. Use none to completely disable automatic capitalization.

How to disable Chrome spell check on INPUT with HTML or jQuery code?

Use the spellcheck attribute:

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

See Spellcheck (MSDN) or Controlling spell checking in HTML forms (MDN).

Is there a way to turn off spell check in a textarea?

got it figured out

function bindEditorFocus() {
    var $editor = $('#editor');
    $editor.focusin(function(){
        $(this).attr('spellcheck', true);
        toggleSpellingcheck(); // loop through all words to add marker
    }); 
    
    $editorblur(function(){
        $editor.attr('spellcheck', false);
        $editor.unbind();    // I need to unbind all function to avoid a loop 
        toogleSpellingcheck(); // loop through all words to remove marker
        $editor.blur();     //get out of text area
        bindEditorFocus();  // rebind all functions 
    });
}


function toogleSpellingcheck(){ 
    //this will loop through all words
    var $editor = $('#editor'); 
    var text = $editor.val();       
    for (var i = 0; i < text.length; i++) {
        $editor.caret({start:i,end:i});
    }
}

the toogleSpellingcheck method loop through all words, it can be optimized to loop through words instead of characters, but this would need the jquery caret plugin

it's a bit messy, but works, anyone got suggestions on improvements please let me know

Turn off Chrome/Safari spell checking by HTML/css

Yes, there is the HTML5 spellcheck attribute.

<textarea spellcheck="false"> or <input type="text" spellcheck="false">

http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#spelling-and-grammar-checking

Update: This is now supported in the latest versions of all browsers.

---

Related Topics