js/jquery：contenteditable，插入文本並將光標移動到末尾

Question

我需要將文本插入到contenteditable div中，然後讓光標位於插入文本的末尾。

我從這裏得到了解決方案Insert text at cursor in a content editable div。

如果文本被添加到空div，這會很好用。但是，如果用戶已經輸入了文字，則不起作用。或者，如果函數用於插入文本，則用戶將光標放置在新文本內的某個位置，然後再次調用該函數。然後光標留在插入文本的開頭。

編輯：下面的代碼工作在IE中，正確設置光標，但在Chrome中有問題。

function insertTextAtCursor(text) { 
    var sel, range, html; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.getRangeAt && sel.rangeCount) { 
      range = sel.getRangeAt(0); 
      range.deleteContents(); 
      range.insertNode(document.createTextNode(text)); 
     } 
    } else if (document.selection && document.selection.createRange) { 
     document.selection.createRange().text = text; 
    } 
} 

Answer 1

好吧，當我意識到這是一個Chrome瀏覽器/ IE的事我設法找到了答案藏在裏面的評論答案是我第一次發現之一。

function insertTextAtCursor(text) { 
    var sel, range, html; 
    sel = window.getSelection(); 
    range = sel.getRangeAt(0); 
    range.deleteContents(); 
    var textNode = document.createTextNode(text); 
    range.insertNode(textNode); 
    range.setStartAfter(textNode); 
    sel.removeAllRanges(); 
    sel.addRange(range);   
}