有没有办法在文本区域中关闭拼写检查？ [复制]

Question

我遇到了这个问题。我有一个文本区域，我只想在它处于焦点时使用拼写检查。

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

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

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

在 chrome 中，如果单词拼写错误，单词下方会出现一条红线。即使我关闭拼写检查器，红线仍然存在。如何删除此标记？

Answer 1

想通了

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});
    }
}

togleSpellingcheck 方法遍历所有单词，它可以优化为遍历单词而不是字符，但这需要 jquery caret 插件

有点乱，但可以，任何人有改进建议请告诉我

Answer 2

虽然在 标记中指定 <em>spellcheck="false"</em> 肯定会禁用该功能，但能够在页面加载后根据需要打开和关闭该功能很方便。所以这里有一个非 jQuery 方法来以编程方式设置 <em>spellcheck</em> 属性：

????：

<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' );

函数参数可以是布尔值或字符串。

无需循环遍历 textarea 内容，我们只需剪切并粘贴那里的内容，然后设置焦点。

在 blink 引擎（Chrome(ium)、Edge 等）中测试

Answer 3

我用这个问题来回答你的问题：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;
  }
}​

演示：http://jsfiddle.net/QgsRU/13/