如何在包含其他標簽的可編輯 div 元素區域的末尾設置焦點

Question

在編寫文本時， jQuery腳本會不時嘗試替換一些單詞。

文本寫在div標簽中， content editable set on true 。

如何focus the cursor最后一個 span 子級的end ，就在父級 span 之前？

<div id="cl-edit-outline-title_AtD_div" contenteditable="true">
 <span class="mceItemHidden">
  <span class="hiddenSpellError" pre="">fgsddfsdfgdsfgsd</span>
  <span class="hiddenSpellError" pre="a">a</span>
  <span class="hiddenSpellError" pre="b">b</span>
  &nbsp;
  <span class="hiddenSpellError" pre="c">c</span>
  <span class="hiddenSpellError" pre="d">d</span>
 </span>
</div>

我在網上搜索了解決方案，但沒有找到。

小提琴

Answer 1

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

調用... $('.yourClassDiv').focusEnd();

請享用.. ;）