Как получить смещение пикселя от текущей позиции каретки в фрейме с помощью contentEditable

Question

Я хотел бы поместить плавающий элемент div в iframe с помощью contentEditable, если пользователь вводит определенную комбинацию клавиш (для целей автозаполнения).

Я знаю, как получить позицию каретки: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorOffset

Я могу использовать это для вычисления left свойства div, но я не могу понять, как получить top.

Еще одна возможность, о которой я думал, это использование: document.getElementById('elm1_ifr').contentWindow.getSelection().anchorNode.parentNode

И используя jQuery для получения смещения, но если у этого родителя длинная текстовая строка, я смогу извлечь только верхнюю позицию первой строки.

Может кто-нибудь помочь мне с этим?

Answer 1

Единственный надежный способ сделать это - вставить временный элемент в каретку (убедитесь, что он имеет нулевую ширину), получить его положение и снова удалить.Вы должны также склеить два конца текстового узла (если это был текстовый узел, содержащий каретку), чтобы убедиться, что DOM остается таким же, как и до вставки узла.Однако обратите внимание, что выполнение этого (или любого другого ручного манипулирования DOM с редактируемым содержимым) нарушает внутренний стек отмены браузера.

Причина этого заключается в том, что внимательное чтение спецификации getBoundingClientRect() метод Range показывает, что getBoundingClientRect() не обязан возвращать Rect для свернутого Диапазона.Концептуально, не каждая позиция в документе имеет четко определенный ограничивающий прямоугольник.Однако каретка имеет физическое расположение на экране, которое, по моему мнению, должно обеспечиваться API выбора, но в настоящее время в браузерах нет ничего, что могло бы это обеспечить.

Answer 2

Я пришел к этой проблеме сегодня. После некоторого тестирования у меня все заработало, без использования временного элемента.

В IE легко разобраться со свойством offsetLeft и offsetTop объекта TextRange. Тем не менее, для 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;
};