11

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

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

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

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

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

4

3 回答 3

4

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

于 2012-06-18T06:14:41.277 回答
2

弄明白了

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 插件

有点乱，但是很有效，有人有改进的建议请告诉我

于 2012-06-18T07:33:35.517 回答
0

虽然在 < textarea > 标签中指定spellcheck="false"肯定会禁用该功能，但能够在页面加载后根据需要打开和关闭该功能很方便。因此，这是一种以编程方式设置拼写检查属性的非 jQuery 方法：

：

<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 内容，我们只需剪切粘贴那里的内容，然后设置焦点。

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

于 2020-11-12T18:17:17.783 回答