如何使用 contentEditable 获取 iframe 中当前插入符号位置的像素偏移量

Posted 2023-04-18

【中文标题】如何使用 contentEditable 获取 iframe 中当前插入符号位置的像素偏移量

【英文标题】：How to get the pixel offset from the current caret position in an iframe with contentEditable

【发布时间】：2012-01-17 09:42:13

【问题描述】：

我想用contentEditable 将浮动div 元素定位在iframe 中，以防用户输入某个组合键（用于自动完成目的）。

我知道如何获得插入符号位置： document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset

我可以使用它来计算 div 的 left 属性，但我似乎无法弄清楚如何获得 top。

我想到的另一种可能性是使用： document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode

并且使用 jQuery 来获取偏移量，但是如果该父级的文本行很长，我将只能提取第一行的顶部位置。

谁能帮我解决这个问题？

【参考方案1】：

这样做的唯一可靠方法是在插入符号处插入一个临时元素（确保它是零宽度），获取它的位置并再次将其删除。您还应该将文本节点的两端（如果它是包含插入符号的文本节点）重新粘合在一起，以确保 DOM 与插入节点之前的状态相同。但是请注意，这样做（或对可编辑内容进行任何其他手动 DOM 操作）会破坏浏览器的内部撤消堆栈。

原因是仔细阅读the spec for the getBoundingClientRect() method of Range 表明getBoundingClientRect() 没有义务为折叠的 Range 返回一个 Rect。从概念上讲，并非文档中的每个位置都有明确定义的边界矩形。然而，插入符号在屏幕上确实有物理位置，我认为这应该由 Selection API 提供，但目前浏览器中没有任何东西可以提供。

【讨论】：

你不能将范围设置为从 0 到当前插入符号位置，然后使用 getBoundingClientRect() 获取左 + 宽度和顶部 + 高度偏移量，然后将插入符号恢复到之前的设置?

旧线程是的，但值得指出的是，插入一个元素 [使用execCommand('inserthtml')] 并删除它会弄乱撤消/重做堆栈。撤消/重做无关紧要。

@techfoobar：很好，谢谢。我在答案中添加了注释。

【参考方案2】：

我今天遇到了这个问题。经过一些测试，我得到了这个工作，没有使用临时元素。

在 IE 中，使用 TextRange 对象的 offsetLeft 和 offsetTop 属性很容易解决。不过 webkit 需要一些努力。

这是一个测试，你可以看到结果。 http://jsfiddle.net/gliheng/vbucs/12/

var getCaretPixelPos = function ($node, offsetx, offsety)
    offsetx = offsetx || 0;
    offsety = offsety || 0;

    var nodeLeft = 0,
        nodeTop = 0;
    if ($node)
        nodeLeft = $node.offsetLeft;
        nodeTop = $node.offsetTop;
    

    var pos = left: 0, top: 0;

    if (document.selection)
        var range = document.selection.createRange();
        pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
        pos.top = range.offsetTop + offsety - nodeTop + 'px';
    else if (window.getSelection)
        var sel = window.getSelection();
        var range = sel.getRangeAt(0).cloneRange();
        try
            range.setStart(range.startContainer, range.startOffset-1);
        catch(e)
        var rect = range.getBoundingClientRect();
        if (range.endOffset == 0 || range.toString() === '')
            // first char of line
            if (range.startContainer == $node)
                // empty div
                if (range.endOffset == 0)
                    pos.top = '0px';
                    pos.left = '0px';
                else
                    // firefox need this
                    var range2 = range.cloneRange();
                    range2.setStart(range2.startContainer, 0);
                    var rect2 = range2.getBoundingClientRect();
                    pos.left = rect2.left + offsetx - nodeLeft + 'px';
                    pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px';
                
            else
                pos.top = range.startContainer.offsetTop+'px';
                pos.left = range.startContainer.offsetLeft+'px';
            
        else
            pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px';
            pos.top = rect.top + offsety - nodeTop + 'px';
        
    
    return pos;
;

【讨论】：

这个问题，正如我在回答中提到的那样，Firefox 和其他浏览器中的 range.getBoundingClientRect() 有时会返回一个包含所有零的 Rect 用于折叠范围。一个例子请参见jsfiddle.net/CK3e8。

没错，蒂姆。我试图将选择的字符向后移动一个字符，并从那里计算出插入符号的位置。

一段漂亮的代码---谢谢！我在这个小提琴中更新了它以修复如果您移动到已经有文本的行的第一个字符并为空 div 添加缺少的偏移量时返回的“undefinedpx”：jsfiddle.net/kevinmicke/vbucs/262