11

私はこの問題に遭遇します。フォーカスされているときにのみスペルチェックを使用したいテキストエリアがあります。

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

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

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

Chrome では、単語のスペルが間違っている場合、その単語の下に赤い線が表示されます。スペルチェッカーをオフにしても、赤い線は残っています。このマーカーを削除するにはどうすればよいですか?

4

3 に答える 3

4

私はあなたの質問に対する答えを得るためにこの質問を使用しました：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});
    }
}

toogleSpellingcheck メソッドはすべての単語をループします。文字ではなく単語をループするように最適化できますが、これには jquery caret プラグインが必要です。

少し面倒ですが、機能します。改善に関する提案があれば、教えてください

于 2012-06-18T07:33:35.517 に答える