在內容可編輯div中的插入元素之後立即設置插入符號位置

Question

我將元素插入到contentEditable div中，但瀏覽器在插入元素之前設置光標的位置。是否可以在插入元素之後立即設置光標，以便用戶不必重新調整光標位置就可以繼續打字？

Answer 1

下面的函數將做到這一點。 DOM Level 2範圍對象在大多數瀏覽器中都很容易實現。在IE中，你需要在你插入的節點後面插入一個標記元素，將選擇移動到它然後刪除它。

活生生的例子：http://jsfiddle.net/timdown/4N4ZD/

代碼：

function insertNodeAtCaret(node) { 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      var range = sel.getRangeAt(0); 
      range.collapse(false); 
      range.insertNode(node); 
      range = range.cloneRange(); 
      range.selectNodeContents(node); 
      range.collapse(false); 
      sel.removeAllRanges(); 
      sel.addRange(range); 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type != "Control") { 
     var html = (node.nodeType == 1) ? node.outerHTML : node.data; 
     var id = "marker_" + ("" + Math.random()).slice(2); 
     html += '<span id="' + id + '"></span>'; 
     var textRange = document.selection.createRange(); 
     textRange.collapse(false); 
     textRange.pasteHTML(html); 
     var markerSpan = document.getElementById(id); 
     textRange.moveToElementText(markerSpan); 
     textRange.select(); 
     markerSpan.parentNode.removeChild(markerSpan); 
    } 
} 

或者，你可以用我的Rangy library。等效代碼會有

function insertNodeAtCaret(node) { 
    var sel = rangy.getSelection(); 
    if (sel.rangeCount) { 
     var range = sel.getRangeAt(0); 
     range.collapse(false); 
     range.insertNode(node); 
     range.collapseAfter(node); 
     sel.setSingleRange(range); 
    } 
} 

Answer 2

如果要插入一個空div，p或跨度，我認爲需要有「東西」新創建的元素中的劫掠的範圍 - 在爲了把脫口秀放在那裏。

這是我的黑客，似乎可以在Chrome中正常工作。這個想法只是簡單地將一個臨時字符串放入元素中，然後在插入符號後將其刪除。

// Get the selection and range 
var idoc = document; // (In my case it's an iframe document) 
var sel = idoc.getSelection(); 
var range = sel.getRangeAt(0); 

// Create a node to insert 
var p = idoc.createElement("p"); // Could be a div, span or whatever 

// Add "something" to the node. 
var temp = idoc.createTextNode("anything"); 
p.appendChild(temp); 
// -- or -- 
//p.innerHTML = "anything"; 

// Do the magic (what rangy showed above) 
range.collapse(false); 
range.insertNode(p); 
range = range.cloneRange(); 
range.selectNodeContents(p); 
range.collapse(false); 
sel.removeAllRanges(); 
sel.addRange(range); 

// Clear the non 
p.removeChild(p.firstChild); 
// -- or -- 
//p.innerHTML = "";