2017-08-22 16 views
0

ATDプラグインをスペルチェックに使用していますが、ATDが追加する編集可能なdivの最後にカーソルを移動します。キャレットを契約後のcontenteditable divで終了するように設定する

function placeCaretAtEnd(el) { 
 
    el.focus(); 
 
    if (typeof window.getSelection != "undefined" && 
 
    typeof document.createRange != "undefined") { 
 
    var range = document.createRange(); 
 
    range.selectNodeContents(el); 
 
    range.collapse(false); 
 
    var sel = window.getSelection(); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
    } else if (typeof document.body.createTextRange != "undefined") { 
 
    var textRange = document.body.createTextRange(); 
 
    textRange.moveToElementText(el); 
 
    textRange.collapse(false); 
 
    textRange.select(); 
 
    } 
 
}
<div id="recap_area" style="height: 54px; overflow: auto; white-space: pre-wrap; outline: none; background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); font-size: 14px; font-family: &quot;Open Sans&quot;, sans-serif; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); text-align: start; margin: 0px; width: 1263px; line-height: 20px; letter-spacing: 0px; left: auto; right: auto; top: auto; bottom: auto; position: static; padding: 6px 12px;" 
 
    class="form-control required valid" contenteditable="true" spellcheck="false"><span class="mceItemHidden"> <span class="hiddenSpellError" pre="">sasa</span> running </span> 
 
</div>

問題は、私が最後にカーソルを移動することはできませんのでdivspan Sが含まれています。

+0

私の答えは役に立ちましたか? – styfle

答えて

1

コードは正常に動作します。最後にカーソルを置くことを示すボタンを追加しました。

function placeCaretAtEnd(el) { 
 
    el.focus(); 
 
    if (typeof window.getSelection != "undefined" && 
 
    typeof document.createRange != "undefined") { 
 
    var range = document.createRange(); 
 
    range.selectNodeContents(el); 
 
    range.collapse(false); 
 
    var sel = window.getSelection(); 
 
    sel.removeAllRanges(); 
 
    sel.addRange(range); 
 
    } else if (typeof document.body.createTextRange != "undefined") { 
 
    var textRange = document.body.createTextRange(); 
 
    textRange.moveToElementText(el); 
 
    textRange.collapse(false); 
 
    textRange.select(); 
 
    } 
 
} 
 

 
var recap_area = document.querySelector('#recap_area'); 
 
var button = document.querySelector('button'); 
 

 
button.onclick = function() { 
 
    placeCaretAtEnd(recap_area); 
 
}
.hiddenSpellError { color: red }
<div id="recap_area" style="height: 54px; overflow: auto; white-space: pre-wrap; outline: none; background-color: rgb(255, 255, 255); color: rgb(85, 85, 85); font-size: 14px; font-family: &quot;Open Sans&quot;, sans-serif; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); text-align: start; margin: 0px; width: 1263px; line-height: 20px; letter-spacing: 0px; left: auto; right: auto; top: auto; bottom: auto; position: static; padding: 6px 12px;" 
 
    class="form-control required valid" contenteditable="true" spellcheck="false"><span class="mceItemHidden"> <span class="hiddenSpellError" pre="">sasa</span> running </span> 
 
</div> 
 

 
<button>Place cursor at end</button>