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

Question

I run into this problem. I have a textarea which I only want to use spell check when it's in focus.

<textarea id="editor"></textarea>

$('#editor').focusin(function(){
    $(this).attr('spellcheck', true);
});

$('#editor').focusout(function(){
    $(this).attr('spellcheck', false);
});

In chrome, if a word is misspelled there is a red line under the word. Even if I turn off the spell checker, the red line still exists. How do I remove this marker?

Sounds like a question for SuperUser more than Stack Overflow. — gdoron, Jun 18 '12 at 06:11
Recreate a textarea with same text in it, but before putting it in DOM, make `spellcheck` false first. — Derek 朕會功夫, Jun 18 '12 at 06:12
Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=841283 — ZachB, Mar 30 '20 at 16:08

score 4 · Answer 1 · edited May 23 '17 at 12:15

4

I used this question to get an answer to your question: Force spell check on a textarea in WebKit

HTML:

<textarea id="editor" spellcheck="true"></textarea>

Javascript:

$('#editor').focusin(function(){
    $(this).attr('spellcheck', true);
});

$('#editor').focusout(function() {
    $(this).attr('spellcheck', false);
    forceSpellcheck($(this));
});

    var canCheck = true;
    function forceSpellcheck($textarea) {
  if (canCheck) {
    canCheck = false;

    $textarea.focus();
    $textarea.attr('spellcheck', false);
    var characterCount = $textarea.val().length;

    var selection = window.getSelection();
    for (var i = 0; i < characterCount; i++ ) {
      selection.modify("move", "backward", "character");
    }

    // Remove focus from the element, since the word under
    // the cursor won't have a misspelling marker.
    $textarea.blur();
  } else {
    canCheck = true;
  }
}

Demo: http://jsfiddle.net/QgsRU/13/

edited May 23 '17 at 12:15

Community

1
1

answered Jun 18 '12 at 06:14

Chango

6,754
1
28
37

2

That loop with constant 1000 doesn't look so good. you can get the amount of words with `.split(\s)`. Fix that and you got my upvote. – gdoron Jun 18 '12 at 06:17
Truth be told I didn't studied that method. I just copy pasted it. I'l l look into that. Thanks gdoron! – Chango Jun 18 '12 at 06:18
It does not even work at all. It hang my browser, and I can't blur it. – Derek 朕會功夫 Jun 18 '12 at 06:18
Really? I have no problem with it. – Chango Jun 18 '12 at 06:19
Yep, you are right guys, I found the problem. Too many blurs :P – Chango Jun 18 '12 at 06:25
the text.blur() and $('#editor').focusout(function() call forceSpellcheck causes a dead loop, but i got your idea there, move cursor across all words to turn spellcheck marker off right?, let me check if it works – Charlie Wu Jun 18 '12 at 06:40
Yes, that was exactly it. I fixed a little bit. It can still needs more work. I'm not 100% happy with the flag solution. – Chango Jun 18 '12 at 06:46
This works in Firefox 76 but doesn't appear to work in Chrome 80. – ZachB Mar 30 '20 at 16:14

score 2 · Accepted Answer · edited Nov 13 '20 at 12:17

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

Mac · Answer 3 · 2020-11-12T18:46:04.293

While specifying spellcheck="false" in the < textarea > 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.)

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

3 Answers3