使用
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;
};
}
