Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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;
                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
                Apr 27, 2011 at 2:01
                @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.
– Tim Down
                Sep 7, 2012 at 13:45
                @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 :)
– zack
                Sep 7, 2012 at 18:16
                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
                Nov 26, 2012 at 12:01
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;
                but I don't know how to check if the text is already selected, so I can reverse the two actions :(
– Alex
                Apr 26, 2011 at 23:35
                @Alex: I wouldn't mess too much with this if I were you. Users expect standard behaviour from textareas.
– Tim Down
                Apr 26, 2011 at 23:45
                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
                Apr 26, 2011 at 23:48
                @Alex: Ah, right. You might want to make it read-only by adding the readonly attribute then.
– Tim Down
                Apr 26, 2011 at 23:55
                @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.
– Tim Down
                Sep 13, 2011 at 9:05
$('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.
                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?
– mastersuse
                Nov 22, 2021 at 7:17
Using the accepted answer on that post, you can call the function like this:
$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
                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.
– Blender
                Apr 26, 2011 at 23:17
                Agreed -- Though the OP could benefit from the added explanation for her implementation. :)
– Todd
                Apr 26, 2011 at 23:18
                That question concerns highlighting text in an element, not a textarea. The two are quite different.
– Tim Down
                Apr 26, 2011 at 23:26
                thanks, I found out that I can do this with $(this).select(), I'll use that because it's less code :)
– Alex
                Apr 26, 2011 at 23:34