如何使用contentEditable從iframe中的當前插入位置獲取像素偏移量

Question

我想在iframe使用contentEditable定位浮點div元素，以防用戶輸入某個鍵組合（用於自動完成目的）。

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

我可以用它來計算div的left屬性，但我似乎無法弄清楚如何獲得top 。

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

並使用jQuery獲取偏移量，但如果該父級有一個長文本行，我只能提取第一行的頂部位置。

誰能幫我這個？

Answer 1

唯一可行的方法是在插入符號處插入一個臨時元素（確保其寬度為零），獲取其位置並再次將其刪除。 您還應該將文本節點的兩端（如果它是包含插入符的文本節點）粘合在一起，以確保DOM與插入節點之前一樣。 但請注意，執行此操作（或對可編輯內容進行任何其他手動DOM操作）會破壞瀏覽器的內部撤消堆棧。

這樣做的原因是仔細讀取Range的getBoundingClientRect()方法的規范顯示getBoundingClientRect()沒有義務為折疊的Range返回Rect。 從概念上講，並非文檔中的每個位置都有明確定義的邊界矩形。 但是，插入符確實在屏幕上有物理位置，我認為應該由Selection API提供，但目前瀏覽器中沒有提供此功能。

Answer 2

我今天遇到了這個問題。 經過一些測試，我得到了這個工作，沒有使用temorary元素。

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