CODEWITHSUNDEEP
javascriptjqueryhtml
dzilla
dzilla

Reputation: 832

Select all text on hover?

I saw this the other day online and it intrigued me. The site had several strings of text for embedding video, pictures, etc. What was neat was when I hovered over them, all of the text in the text box was selected, making it easier to copy/paste. I'm curious as to how this was done.

Upvotes: 3

Views: 9165

Answers (7)

Claude
Claude

Reputation: 879

HTML

<textarea class="auto_select"></textarea>

jQuery

$(".auto_select").mouseover(function(){
 $(this).select();
});

Just add the jQuery in your global jQuery library and then add the class on each element that you want to select on hover.

Upvotes: 5

Šime Vidas
Šime Vidas

Reputation: 186083

HTML:

<input type="text" id="test" value="Just some text here">

JavaScript:

$('#test').mouseenter(function() {
    this.focus();
    this.select(); 
});

Live demo: http://jsfiddle.net/5F8Wm/

Upvotes: 2

Calum
Calum

Reputation: 5316

$("textarea").hover(function(){
    $(this).select();
});

Upvotes: 1

zipizip
zipizip

Reputation: 289

<input type="text" onmouseover="this.select();" id="textAreaId" name="textArea"/>

You can use this onmouseover or onclick or anywhere you want. Is that what you wanted?

Upvotes: 1

tskuzzy
tskuzzy

Reputation: 36476

You don't even need jQuery for this.

<input onmouseover="this.select()" />

Upvotes: 14

betamax
betamax

Reputation: 14061

Edit: Oops! Didn't see you wanted jQuery! This is it with no library:

var el = document.getElementById("your-textarea");

if (el.addEventListener) el.addEventListener("mouseover",selectText,false);
else if (el.attachEvent) el.attachEvent("onmouseover",selectText);
else el.onmouseover = selectText;

function selectText(){

    this.focus();
    this.select();

}

See a jsfiddle here: http://jsfiddle.net/GBgJ9/

Upvotes: 1

lamelas
lamelas

Reputation: 872

You can use something like this:

$("input").mouseover(function() {
    $(this).select();
});

Upvotes: 0

Related Questions