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

I have got a problem, I'd like to select text that is inside a div, here is jsfiddle http://jsfiddle.net/KL6G3/

我有一个问题,我想选择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;   
}

When I hover over #select, text doesnt get selected, what am I doing wrong?

当我将鼠标悬停在#select上时,文本没有被选中,我做错了什么?

Thanks

2 个解决方案

#1

this.focus(); and this.select(); will only work for input and textarea.

this.focus();和this.select();只适用于输入和textarea。

Here is a simple way:

这是一个简单的方法:

Assign contenteditable attribute to that particular element. If user set focus into editable div then content of editable div is selected.

将contenteditable属性分配给该特定元素。如果用户将焦点设置为可编辑的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

#2

What is the purpose of the selection? To highlight or to copy the text? You can use CSS to highlight and zero clipboard to copy, and combine both of them, if you want highlight and copy to clipboard. Avoid contenteditable if it is not an editable area.

选择的目的是什么?要突出显示还是复制文本?如果要突出显示并复制到剪贴板,可以使用CSS突出显示并将剪贴板归零,并将它们组合在一起。如果它不是可编辑区域,请避免使用contenteditable。

#1