在内容可编辑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 = "";