133

How can I make it so when you click inside a textarea, its entire content gets selected?

And eventually when you click again, to deselect it.

Improve this question
2

6 Answers 6

Reset to default
199

To stop the user from getting annoyed when the whole text gets selected every time they try to move the caret using their mouse, you should do this using the focus event, not the click event. The following will do the job and works around a problem in Chrome that prevents the simplest version (i.e. just calling the textarea's select() method in a focus event handler) from working.

jsFiddle: http://jsfiddle.net/NM62A/

Code:

<textarea id="foo">Some text</textarea> <script type="text/javascript"> var textBox = document.getElementById("foo"); textBox.onfocus = function() { textBox.select(); // Work around Chrome's little problem textBox.onmouseup = function() { // Prevent further mouseup intervention textBox.onmouseup = null; return false; }; }; </script>

jQuery version:

$("#foo").focus(function() { var $this = $(this); $this.select(); // Work around Chrome's little problem $this.mouseup(function() { // Prevent further mouseup intervention $this.unbind("mouseup"); return false; }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I think it's better to implement this stuff using a separate "select all text" button since automatically selecting the text on focus or click events is realy annoying.
this fails for me in Chrome, working solution is: stackoverflow.com/a/6201757/126600
@zack: The jsFiddle example in this answer works for me in Chrome. Does it not for you? I agree the answer you linked to is more foolproof.
@TimDown: you are right, I was being a bit over zealous - actually it does work correctly on 'click', but fails if you tab into the textarea - the your other solution works for both cases :)
Change the above code slightly and it will work like a charm.. $("#foo").mouseup(function() { $("#foo").unbind("mouseup"); return false; }); you need to refer the textbox without using this just refer it with full path.. and it will work..
|
15

Better way, with solution to tab and chrome problem and new jquery way

$("#element").on("focus keyup", function(e){ var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; if(keycode === 9 || !keycode){ // Hacemos select var $this = $(this); $this.select(); // Para Chrome's que da problema $this.on("mouseup", function() { // Unbindeamos el mouseup $this.off("mouseup"); return false; }); } });
Improve this answer

Comments

11

I ended up using this:

$('.selectAll').toggle(function() { $(this).select(); }, function() { $(this).unselect(); });
Improve this answer

8 Comments

but I don't know how to check if the text is already selected, so I can reverse the two actions :(
@Alex: I wouldn't mess too much with this if I were you. Users expect standard behaviour from textareas.
no, this particular textarea is only meant for copy-paste. all the text I have inside it is a big encryted string which can only be either entirely replaced, or copied to the clipboard
@Alex: Ah, right. You might want to make it read-only by adding the readonly attribute then.
@Hollister: No, it's perfectly possible for either user or script to select content within a div. You're probably thinking of copying to the clipboard, which isn't possible in script without a Flash-based library like ZeroClipboard.
|
8 
$('textarea').focus(function() { this.select(); }).mouseup(function() { return false; });
Improve this answer

Comments

5

Slightly shorter jQuery version:

$('your-element').focus(function(e) { e.target.select(); jQuery(e.target).one('mouseup', function(e) { e.preventDefault(); }); });

It handles the Chrome corner case correctly. See http://jsfiddle.net/Ztyx/XMkwm/ for an example.

Improve this answer

1 Comment

Hi, I was tested your code and it's working. Currently, in my situation I am using disabled attribute in my <textarea disabled>test</textarea>, but it's not working, so how to fix it?
4

Selecting text in an element (akin to highlighting with your mouse)

:)

Using the accepted answer on that post, you can call the function like this:

$(function() { $('#textareaId').click(function() { SelectText('#textareaId'); }); });
Improve this answer

4 Comments

Maybe flagging this question as a duplicate might be more useful? It wasn't really your answer, so it'd be better to merge the two questions.
Agreed -- Though the OP could benefit from the added explanation for her implementation. :)
That question concerns highlighting text in an element, not a textarea. The two are quite different.
thanks, I found out that I can do this with $(this).select(), I'll use that because it's less code :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.