javascript – 从FF / Webkit中的像素位置创建折叠范围

使用 JavaScript,我想从像素位置创建一个折叠的范围,以便在此位置标识的范围之后,在文档流中插入新节点.

这可以通过Internet Exporer(moveToPoint(x,y)方法)中的TextRange对象来完成.

我如何在FireFox& WebKit的？

我可以从document.elementFromPoint(x,y)的位置获取容器元素.但是,当位置恰好位于文本节点内时,如何获取有关构建范围所需的文本偏移量的更多信息？

解决方法

以下是我对旧浏览器的caretRangeFromPoint的实现：

if (!document.caretRangeFromPoint) {
    document.caretRangeFromPoint = function(x,y) {
        var log = "";
 
        function inRect(x,y,rect) {
            return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
        }
 
        function inObject(x,object) {
            var rects = object.getClientRects();
            for (var i = rects.length; i--;)
                if (inRect(x,rects[i]))
                    return true;
            return false;
        }
 
        function getTextNodes(node,x,y) {
            if (!inObject(x,node))
                return [];
 
            var result = [];
            node = node.firstChild;
            while (node) {
                if (node.nodeType == 3)
                    result.push(node);
                if (node.nodeType == 1)
                    result = result.concat(getTextNodes(node,y));
 
                node = node.nextSibling;
            }
 
            return result;
        }
 
        var element = document.elementFromPoint(x,y);
        var nodes = getTextNodes(element,y);
        if (!nodes.length)
            return null;
        var node = nodes[0];
 
        var range = document.createRange();
        range.setStart(node,0);
        range.setEnd(node,1);
 
        for (var i = nodes.length; i--;) {
            var node = nodes[i],text = node.nodeValue;
 
 
            range = document.createRange();
            range.setStart(node,0);
            range.setEnd(node,text.length);
 
            if (!inObject(x,range))
                continue;
 
            for (var j = text.length; j--;) {
                if (text.charCodeAt(j) <= 32)
                    continue;
 
                range = document.createRange();
                range.setStart(node,j);
                range.setEnd(node,j + 1);
 
                if (inObject(x,range)) {
                    range.setEnd(node,j);
                    return range;
                }
            }
        }
 
        return range;
    };
}

javascript – 从FF / Webkit中的像素位置创建折叠范围

解决方法

猜你在找的JavaScript相关文章