Question

我希望在单击“span”时获取文本区域中的选定文本。当我点击按钮时，选择有效，但是当我点击跨度时没有也许是因为单击span时选择会丢失，但单击按钮时不会发生这种情况？如何解决？

function Copy() {
  var theSelection = document.selection.createRange();
  alert(theSelection.text);           
}

 <div>
    <span class="Icon" onclick="Copy();"></span> <input type="button" value="Copy" onclick="Copy();" style="float:left;" />  
 </div>
 <div style="clear:both;">
    <textarea rows="2" cols="20" style="height:370px;width:800px;"></textarea> 
 </div>

仅限IE浏览器

Online Example

更新

这就是我在firefox中的表现：

if (window.getSelection){ // Firefox, Opera, Safari

   var textbox = document.getElementById("box");
   textbox.focus();
   theSelection = document.activeElement.value.substring(document.activeElement.selectionStart, document.activeElement.selectionEnd);

alert(theSelection);
}

Answer 1

是的，就是这样：当点击事件触发时，选择已经丢失。如果您使用onmousedown代替onclick，则会有效。

<强>更新

仅在IE中有效的另一种选择是将以下属性添加到<span>。这可以防止跨度影响选择，使其无法选择：

unselectable="on"

更新2

在其他浏览器中，获取所选文本的方法是使用selectionStart和selectionEnd属性：

function Copy() {
    var textbox = document.getElementById("box");
    textbox.focus();
    var selectedText = "";
    if (typeof textbox.selectionStart == "number") {
        selectedText = textbox.value.slice(textbox.selectionStart, textbox.selectionEnd);
    } else if (document.selection) {
        selectedText = document.selection.createRange().text;
    }
    alert(selectedText);
}

在IE中单击span时从textarea中检索所选文本

1 个答案: