javascript - Firefox 三击选择返回不正确的开始和结束偏移

标签 javascript html firefox selection

我有这段代码应该返回用户选择的开始和结束偏移量:

<!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/

相关文章:

javascript - window.__proto__ 相当于 IE10

javascript - document.getElementsByClassName() 数组中元素的顺序

javascript - 在内部循环中创建一个进度条 - Javascript

javascript - Firefox 说无法下载搜索插件

html - 如何将日期输入占位符对齐到 Firefox 的中心

javascript - 无法在 React Material-UI 的 useState 中设置值

javascript - 使用 ReactJS 通过 Redux 进行简单的状态更新事件?

javascript - Vue.js 可以使用 node-coap 库吗?

javascript - 如何在弹出窗口而不是内部 html 中显示消息

firefox - 真正的 headless (headless)浏览器