jQuery - select all text from a textarea

javascript jquery forms textarea selection

122,469

Solution 1

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;
    });
});

Solution 2

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;
            });
        }
    });

Solution 3

I ended up using this:

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

Solution 4

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

Solution 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.

View more solutions

122,469

Author by

Alex

I'm still learning so I'm only here to ask questions :P

Updated on December 25, 2020

Comments

Alex over 3 years

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.
Blender about 13 years

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.
Todd about 13 years

Agreed -- Though the OP could benefit from the added explanation for her implementation. :)
Tim Down about 13 years

That question concerns highlighting text in an element, not a textarea. The two are quite different.
Alex about 13 years

thanks, I found out that I can do this with $(this).select(), I'll use that because it's less code :)
Alex about 13 years

but I don't know how to check if the text is already selected, so I can reverse the two actions :(
Tim Down about 13 years

@Alex: I wouldn't mess too much with this if I were you. Users expect standard behaviour from textareas.
Alex about 13 years

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
Tim Down about 13 years

@Alex: Ah, right. You might want to make it read-only by adding the readonly attribute then.
RobG about 13 years

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.
RobG about 13 years

Consider making the text content of a div.
Hollister almost 13 years

@RobG: If it was a div, copy/paste would require more code (and likely a flash-based plugin), rather than using the built-in clipboard capabilities of a textarea.
Tim Down almost 13 years

@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.
zack almost 12 years

this fails for me in Chrome, working solution is: stackoverflow.com/a/6201757/126600
Tim Down almost 12 years

@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.
zack almost 12 years

@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 :)
pratikabu over 11 years

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..
pratikabu over 11 years

@TimDown it was not working for me also.. but after replacing it with absolute reference it worked fine.. i'm using jQuery 1.8..
realtebo about 11 years

toggle() is now deprecated AND removed
mastersuse over 2 years

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?