Auto Select Text Within a Text Box

August 22, 2007

***** Updated 9/24/2007 *****Thanks to Marko for pointing out an IE/Firefox issue. For those of you who already used this code, you may find out that the auto select is only working in Internet Explorer. To get it to work in both IE and Firefox, simply change < textarea name to read < textarea id. Those of you new to this post, please just follow the instructions below! Thank You.*****

Anyone who has changed their Myspace layout (prior to the built in layout editor) or copied code from a tutorial/code repository has run across a Html text box that auto selects all the text it is holding when ever the mouse is clicked inside it. It is a nice feature to have for any of your users and eliminates the mistake of not selecting all the code that needs to be copied.

One of my co-workers came to me yesterday and asked if I new how to get that feature to work, since getting our product Talkr onto your own website is done through copying and pasting code that we have available on an html page. It took a lot of searching, but after finding the right combination of words, I finally found out how to do it using some simple Java script.

I am going to assume that you have your Html page set up, and that you a text area/box placed and ready for the code. For the purpose of this example, I have named my text area/box “aa”.

First, copy this code and paste it in-between the and tags at the top of your Html page using your editor of choice:

< script type=”text/javascript”>
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script >

Then find this information where you have your text area/box. It will look similar but not the same:

< textarea id=”aa” rows=7 cols=32 >

and paste this after the =”aa”

onClick=”SelectAll(‘aa’);”

so it should look like this after you are finished:

< textarea id=”aa” onClick=”SelectAll(‘aa’);” rows=7 cols=32 >

And thats it!

Since I have very little to no experience coding Java by hand, this solution took me much longer to find than it did to actually implement. Hope it helps!

Advertisements

11 Responses to “Auto Select Text Within a Text Box”

  1. Andrei Says:

    Thank you, it helped:)

  2. Marco Says:

    Thanks, that’s a very useful code.

  3. Marco Says:

    Actually I have to mention I had to use the id attribute for the textarea to make it work, rather than name. Small details makes the difference 🙂

  4. yodertech Says:

    Thanks Marco, I have updated the post!

  5. Joe Audette Says:

    Actually you can simplify it to this:

    function SelectAll(element)
    {
    element.focus();
    element.select();
    }

    onClick=”SelectAll(this);”

    Cheers,

    Joe

  6. Vince Says:

    you could also skip the script section and modify only your textarea tag.

  7. Austin Says:

    What if you wanted to select a div :\

  8. Nathan Says:

    i also would like to know how to auto-select a div

  9. cj Says:

    this is great, im using it for my whore code on myspace

  10. my_darn Says:

    How to do it with blogger?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: