如何使用 html 子元素在 contenteditable div 中获取插入符号位置？

Posted 2023-02-19

【中文标题】如何使用 html 子元素在 contenteditable div 中获取插入符号位置？

【英文标题】：How to get caret position within contenteditable div with html child elements?

【发布时间】：2011-08-22 13:17:06

【问题描述】：

我正在使用一个内容可编辑的 div，它可以选择在文本流中包含内联 html 元素，例如标签。

在某些情况下，我需要获取插入符号的位置，但发现在示例代码中，如果插入符号位于 html 子元素之后，则返回的位置不正确。

我需要一个跨浏览器解决方案，它允许我存储插入符号的位置，以便即使在文本流中存在 html 元素的情况下也可以在瞬间恢复它。

例子：

function getCaretPosition(editableDiv) 
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) 
        sel = window.getSelection();
        if (sel.rangeCount) 
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) 
                caretPos = range.endOffset;
            
        
     else if (document.selection && document.selection.createRange) 
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) 
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        
    
    return caretPos;


$('div').keyup(function()
   alert(getCaretPosition(this));
);

divwidth:300px; height:100px; border:solid 1px #DDD;
div abackground:#333; color:#FFF;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div contenteditable=true>
    some example text <a>anchor tag</a>&nbsp;
</div>

原始 JSFiddle：http://jsfiddle.net/wPYMR/2/

【问题讨论】：

在这一瞬间，div 的内容会发生什么（或可能发生）？

最后一个单词类型可以去掉，插入符号位置更正。

【参考方案1】：

我在这里回答了一个非常相似的问题：Editing Iframe Content in IE - problem in maintaining text selection

这是该答案的略微简化版本：

如果您不更改 contenteditable 元素的内容，则可以使用以下函数。在做任何你需要做的事情之前打电话给saveSelection()，之后打电话给restoreSelection()。如果您要更改内容，我建议使用我的Rangy 库的save/restore selection module。

var saveSelection, restoreSelection;
if (window.getSelection) 
    // IE 9 and non-IE
    saveSelection = function() 
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) 
            for (var i = 0, len = sel.rangeCount; i < len; ++i) 
                ranges.push(sel.getRangeAt(i));
            
        
        return ranges;
    ;

    restoreSelection = function(savedSelection) 
        var sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedSelection.length; i < len; ++i) 
            sel.addRange(savedSelection[i]);
        
    ;
 else if (document.selection && document.selection.createRange) 
    // IE <= 8
    saveSelection = function() 
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    ;

    restoreSelection = function(savedSelection) 
        if (savedSelection) 
            savedSelection.select();
        
    ;

使用示例：

var sel = saveSelection();
// Do stuff here
restoreSelection(sel);

【讨论】：

如何将它应用到单个 contenteditable div？当 contenteditable 元素有子元素时，这会起作用吗？

@TimDown 这个答案对获得插入符号位置有何帮助？