CODEWITHSUNDEEP
javascripthtmlcss
user3719693
user3719693

Reputation: 255

Select text in div on mouse over

I have got a problem, I'd like to select text that is inside a div, here is 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?

Thanks

Upvotes: 0

Views: 2281

Answers (2)

Sarbbottam
Sarbbottam

Reputation: 5580

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.

Upvotes: 0

imbondbaby
imbondbaby

Reputation: 6411

this.focus(); and this.select(); will only work for input and 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.

<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

Upvotes: 1

Related Questions