Question

让我们从代码开始：

<html> 
<head> 
<title>Opera bug test</title> 

<script type="text/javascript"> 
function callTest() 
{ 
  var oElem=document.getElementById("testDIV"); 

  if (window.getSelection) 
  { 
    var oCurSelection=window.getSelection(); 
    var curRange=document.createRange(); 
    curRange.selectNodeContents(oElem); 
    oCurSelection.removeAllRanges(); 
    oCurSelection.addRange(curRange); 
  } 
} 
</script> 
</head> 

<body> 
<a onclick="callTest();" style="text-decoration: underline; cursor: pointer">Select</a> 
<div id="testDIV"><span>Text TO Test!!!!</span></div>
</body> 
</html>

此代码效果很好：点击链接 - >按Ctrl + C-＆gt;“文字测试!!!!”在剪贴板中。好！

现在，在之前的代码中，我们可以进行一次微小的更改，行：

<div id="testDIV"><span>Text TO Test!!!!</span></div>

替换为3行：

<div id="testDIV">
<span>Text TO Test!!!!</span>
</div>

字面意思 - 只需在HTML代码中插入几个“新行”即可。一切都坏了！单击链接继续选择（可视）文本，但Ctrl + C不要将其推入剪贴板。此外，甚至视觉选择都是......奇怪的，可以说。例如，在测试1中：单击链接 - >选中的文本 - >单击页面上的空位 - ＆gt;文本DEselected。这是正常的行为。在测试2中：点击链接 - >选择文字 - >点击页面上的空白地点 - ＆gt;文本保留它的选择高亮！

这是什么？ Opera可怕的错误？：）

P.S。我在Windows XP SP3，Opera 11.60（build 1185）中进行了实验。

Answer 1

它是Opera的问题，包含空textNodes（或其中的换行符）

修复方法是检查div中子元素的节点类型，看它们是否为元素

e.g：

    var curRange=document.createRange(); 
    var children = oElem.childNodes,
    ind, child;

    for(ind in children) {
        child = children[ind];
        console.log(child.nodeType);
        if (child.nodeType == Node.ELEMENT_NODE) {
            console.log(child);
            curRange.selectNodeContents(child); 
            oCurSelection.addRange(curRange); 
        }
    }
   // oCurSelection.removeAllRanges(); 
    //oCurSelection.addRange(curRange);

使用javascript在Opera中选择DIV内的文本

1 个答案: