Question

我遇到了问题，我想选择div内的文字，这里是jsfiddle http://jsfiddle.net/KL6G3/

HTML：

<div id="connect">some text some text: <div id="select" onmouseover="this.focus();this.select();">when you hover over therer, it gets selected</div></div>

CSS：

#connect {
    resize: none;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    position: relative;
    top: 4px;
    border: none;
}
#connnect:focus {
    border: none;
}
#select {
     display: inline-block;   
}

当我将鼠标悬停在#select上时，文字没有被选中，我做错了什么？

由于

Answer 1

this.focus();和this.select();仅适用于input和textarea。

这是一个简单的方法：

将contenteditable属性分配给该特定元素。如果用户将焦点设置为editable div，则会选择可编辑div的内容。

<div contenteditable="true" onmouseover="document.execCommand('selectAll',false,null)" id="connect">some text some text: <div>when you hover over therer, it gets selected</div></div>

<强> JSFiddle Demo

Answer 2

选择的目的是什么？要突出显示还是复制文本？如果要突出显示并复制到剪贴板，可以使用CSS突出显示并zero clipboard进行复制，并将两者结合使用。如果它不是可编辑区域，请避免使用contenteditable。

在鼠标悬停时选择div中的文本

2 个答案: