在 Internet Explorer 中的隐藏元素上添加选择引发错误答案

【问题标题】：Add selection on hidden element in Internet Explorer raise error在 Internet Explorer 中的隐藏元素上添加选择引发错误
【发布时间】：2015-10-19 18:01:39
【问题描述】：

我想在我的网页上选择某个范围。如果元素被隐藏，IE (Internet Explorer) 和 Edge 会出错。如何在隐藏元素上向文档添加选择？

示例

<html>
  <head>
    <meta name="robots" content="noindex">
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style id="jsbin-css">
      #d2{
        display:none;
      }
    </style>
  </head>
  <body>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
    <a onclick="doSel()" href="javascript:void(0)">click me:)</a>
    <script id="jsbin-javascript">

    function doSel(){
    var element = $("#d2").contents()[0];
      var myRange = createRange(element,1, element,2);

      console.log(myRange);
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(myRange);
    }

    function createRange(startContainer, startOffset, endContainer, endOffset){
        var rangeObj      = document.createRange ();

        rangeObj.setStart (startContainer, startOffset);
        rangeObj.setEnd (endContainer, endOffset);

        return rangeObj;
    }
    </script>

  </body>
</html>

在这个页面中，我在 Firefox 和 Chrome 的 div#d2 中选择了“i”，但 IE 给了我错误unspecified error，Edge 给了我Could not complete the operation due to error 800a025e.。这些错误在这一行被抛出：document.getSelection().addRange(myRange);

如何解决问题并在 IE 和 Edge 中为我的文档选择添加范围？

【问题讨论】：

@mplungjan 我搜索了一下，但没有找到任何有用的答案。 removeAllRanges() 的答案在我的情况下不起作用。这就是我问的原因：）

标签： javascript html internet-explorer range microsoft-edge

【解决方案1】：

我进行了搜索，但找不到任何关于错误原因的解释。

一种解决方法，因为如果元素具有display: none（但 Edge 确实如此），Chrome/FF 都不会返回任何值，因此首先要实际检查。如果它有display:none，则传回一个空字符串。

我也尝试了下面的演示，如果要抓取的元素有display:none，则抓取上一个和下一个元素。

有了这个，我实际上能够抓取 display:none 元素的文本，虽然它只适用于 IE11。

测试：http://jsfiddle.net/p0k7jj12/2/

我做的快速测试的部分代码

function doSel(){

  var element3 = $("#d3").contents()[0];
  var element2 = $("#d2").contents()[0];
  var element1 = $("#d1").contents()[0];

  var myRange = createRange(element1,4, element3,0);

  console.log(myRange);
  document.getSelection().removeAllRanges();
  document.getSelection().addRange(myRange);

  alert(document.getSelection());

}

【讨论】：

谢谢你的回答：D，我看了你的小提琴，我必须承认它很有创意，但它选择了第二个 div 的全部内容，而不是我的例子中显示的一个字符。实际上，我确实以另一种方式解决了我的问题。我想包装选择，我也可以这样做：var a = $("<a />", {id: anchorId, "class": "noteElement"}); rangeObj.surroundContents(a[0]); 首先我将所有选择包装在文档中。现在我一次包装一个元素。
我提供的解决方案是包装一个范围而不将其添加到文档中。这不是问题的答案。问题是：如何将范围元素添加到隐藏容器的文档中。所以我不确定是否将其发布为正确答案。