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

Question

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

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

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

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

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

谁能帮我解决这个问题吗？

Answer 1

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

这样做的原因是仔细阅读 getBoundingClientRect 的规范Range 的 () 方法表明，getBoundingClientRect() 没有义务为折叠的 Range 返回 Rect。从概念上讲，并非文档中的每个位置都有明确定义的边界矩形。然而，插入符号在屏幕上确实有物理位置，我认为这应该由选择 API 提供，但目前浏览器中没有任何内容可以提供此功能。

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