在contentEditable div的插入元素后面设置插入符的位置

我将一个元素插入到contentEditable div中，但是浏览器在插入元素之前设置了光标的位置。 是否可以在插入元素后面设置光标，以便用户不必重新调整光标位置就可以继续input？

Answer 1

以下function将做到这一点。 DOM Level 2 Range对象在大多数浏览器中都很简单。 在IE中，你需要在你插入的节点后插入一个标记元素，将select移动到它然后删除它。

现场示例： 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库 。 那里的等效代码将会是

 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或span，我相信在新创build的元素里面需要有一些东西来抓取范围，并且把插入符号放在里面。

这是我的黑客，似乎在Chrome中工作正常。 这个想法只是在元素内部放置一个临时string，然后在插入符号后将其删除。

 // 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 = "";