我有这段代码应该返回用户选择的开始和结束偏移量:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getSelRange() {
var selObj = window.getSelection();
var range = selObj.getRangeAt(0);
alert(range.startOffset+"-"+range.endOffset);
}
</script>
</head>
<body>
<button onclick="getSelRange()">Get the selected text!</button>
<p>Select some text!</p>
</body>
</html>
当我通过拖动从 p
中选择一些文本时,它会正确地提醒数字。但是,当我通过三次单击选择 p
中的整个文本时,它会提示 0-1。看起来仅在 Firefox 中,三次单击没有正确返回选择范围。
如何在三次点击时获得正确的起点和终点?
最佳答案
Firefox 正在返回正确的范围。问题是您关于范围必须具有相对于文本节点的开始和结束边界的假设是不正确的。
发生的事情是 Firefox 报告范围开始于 <p>
的第零个子节点之前。元素并在 <p>
的第一个子元素之后结束元素。这是完全正确的。
您可以执行类似以下操作来调整此类范围,使其边界位于 <p>
内的文本节点内。元素:
演示:http://jsfiddle.net/DbmjH/2/
代码:
function adjustRange(range) {
range = range.cloneRange();
if (range.startContainer.nodeType != 3) {
var nodeAfterStart = range.startContainer.childNodes[range.startOffset];
if (nodeAfterStart && nodeAfterStart.nodeType == 3) {
range.setStart(nodeAfterStart, 0);
}
}
if (range.endContainer.nodeType != 3 && range.endOffset >= 1) {
var nodeBeforeEnd = range.endContainer.childNodes[range.endOffset - 1];
if (nodeBeforeEnd && nodeBeforeEnd.nodeType == 3) {
range.setEnd(nodeBeforeEnd, nodeBeforeEnd.data.length);
}
}
return range;
}
关于javascript - Firefox 三击选择返回不正确的开始和结束偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21229067/