在contentEditable div中的inserted元素后面设置插入位置 [英] Set caret position right after the inserted element in a contentEditable div

问题描述

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

I'm inserting an element into a contentEditable div but the browser sets the position of the cursor before the inserted element. Is it possible to set the cursor right after the inserted element so that the user keeps typing without having to re-adjust the cursor position?

推荐答案

以下功能可以实现。 DOM Level 2 Range对象使这在大多数浏览器中变得容易。在IE中，您需要在插入的节点之后插入标记元素，将选择移动到它，然后将其删除。

The following function will do it. DOM Level 2 Range objects make this easy in most browsers. In IE, you need to insert a marker element after the node you're inserting, move the selection to it and then remove it.

实例： 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图书馆。那里的等价代码是

Alternatively, you could use my Rangy library. The equivalent code there would be

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);
    }
}

这篇关于在contentEditable div中的inserted元素后面设置插入位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！