Grow your CSS skills. Land your dream job.

Last updated on:

Auto Select Textarea Text

<textarea rows="10" cols="50" onclick="this.focus();this.select()" readonly="readonly">
   example text
</textarea>

Comments

  1. Jack
    Permalink to comment#

    So much easier then with jQuery. Just goes to show, a quick search can save you a lot of time, and KB on the finished site. Thanks Chris!

  2. thx a lot!!! its really helpfull, another trick is sucks!!!

  3. Dhaval

    nice one
    for designer its a very easy with help

  4. Permalink to comment#

    WORKS !!!!

  5. surf http://www.rapidmaza.com for sending free sms 400 character and for free sms api

  6. Permalink to comment#

    thanks… its work! ^^

  7. Permalink to comment#

    Great and Works! Thank you.

  8. Stef
    Permalink to comment#

    Just what I was looking for… thanks!

    Do you also have the code to make it automatically copy to the clipboard? That would make my life complete lol.

    cheers

    Stef

    • mostafa
      Permalink to comment#

      just write document.execCommand(‘copy’); after this.select()

  9. This doesn’t work in iOS devices. I’ve seen mention of setSelectionRange() working there, but I can’t get that to work in iOS: http://jsfiddle.net/zBa5n/2/

    Does anyone know how to do this?

  10. Permalink to comment#

    Works for me. Thanks!

  11. Permalink to comment#

    @Stef: I looked for what you asked about as well and found this article: http://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

    In the end, I went with instructions to CTRL+C/CTRL+P as accessing the clipboard ended up sounding like a bit of a nightmare. If it’s good enough for YouTube, it’s good enough for me.

  12. Permalink to comment#

    This one is on mouseover:

    *textarea cols=”35″ rows=”3″ onmouseover=”this.focus()” onfocus=”this.select()”>
    TEXT HERE
    */textarea>

  13. Much simpler and more correct:

    onfocus=”this.select()”

    Don’t rely exclusively on the mouse for driving events, use the generic approach because the keyboard drives events too (Some people cycle through fields using the TAB key much faster than using the mouse). XBox controller is relevant to this scenario too.

    • Jay
      Permalink to comment#

      This also has the added benefit of not selecting all text when the user wants to drag select just a portion of the text in the textarea. The original solution selects all text, all the time, which can be frustrating for users that only want to select some of the text.

  14. The code works like a charm! Thanks, I have been looking all over the internet for something like this!

  15. how about auto highlight “pre code” can you give guidance? thanks

  16. What about ajax loaded textareas? They’ll pretty much fail.

  17. It worked for me. thanks

  18. Permalink to comment#

    Thanks for this, it helps too!

  19. steven
    Permalink to comment#

    This only replaces the first instance can you replace all matching words?

  20. Nishant
    Permalink to comment#

    Does not work on chrome.

    • Indika

      nope! I just rested it just a couple of minutes ago. It is working on Chrome. Check your browser whether JS enabled!

  21. Permalink to comment#

    I am trying to add copy to clipboard function to my wordpress site. any suggestion?

  22. Thanks, I am using this I want to change what is showing and one click selectable in my text area, based on a checkbox.

    If you look here (http://indiegospel.org/widget), you see a widget page. My widget has a “Get this widget” tag that links to the widget page to make it “viral” or “shareable”. I would like to make that link optional with a checkbox so that the “Get this widget” tag is displayed or not displayed in the text area depending on user choice.

    There is a working example here with the checkbox which controls the showing of the “Grab This” code in this Feedburner widget – http://feedburner.google.com/fb/a/headlineanimator/install?target=code&id=2392250btql00tmh66lqp000ms&w=2

    I am basically trying to do the same sort of thing they are doing with my widget.

  23. ryhan
    Permalink to comment#

    works Great
    thanks

    and I have one question, how can I add Button to make a copy of the selected Text?

    • Permalink to comment#

      I’m trying to do the same thing – add a button or text next to the text area saying ‘Copy Text’ – searching google keeps bringing up this page though… please help me out @jaycameron

  24. Works fine. Except tabbing. Clicking it becomes editable but when i use the tab key on my keyboard its not highlighted or editable. Any idea how to fix this? thanks

    • Mike
      Permalink to comment#

      I know it was posted a while ago, but did you ever get a response to this?

      I am looking to do the same thing, when tabbing! Can’t figure it out.

      Thanks

  25. Permalink to comment#

    Hi,
    Thank you,
    It works everywhere even in chrome!

  26. Thanks.

  27. Brian

    Does anyone have a follow-up to Dody’s post? I also need this to work on pre code. I am trying to make this select my banner code. Simply put, an img tag that links using a basic a href tag. Absolutely nothing fancy.

  28. Sandeep
    Permalink to comment#

    Thanks for this snippet. Does what I want.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".