Get a free trial // Grow your CSS skills // Land your dream job

Auto Select Textarea Text

Last updated on:
<textarea rows="10" cols="50" onclick="this.focus();" readonly="readonly">
   example text


  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. febriyanto
    Permalink to comment#

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

  3. Dhaval

    nice one
    for designer its a very easy with help

  4. emilights
    Permalink to comment#

    WORKS !!!!

  5. vijay
    Permalink to comment#

    surf for sending free sms 400 character and for free sms api

  6. Gye
    Permalink to comment#

    thanks… its work! ^^

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



    • mostafa
      Permalink to comment#

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

    • Adam
      Permalink to comment#

      Sadly, we are not allowed to copy to clipboard directly from JS for security reasons. There are tons of workarounds but more often than not, you should just tell them to use Cntrl+C for themselves. Also I think my reply is a little late. lol. You probably already figured this out!

  9. Michael C. Harris
    Permalink to comment#

    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:

    Does anyone know how to do this?

  10. Sherton
    Permalink to comment#

    Works for me. Thanks!

  11. Tim
    Permalink to comment#

    @Stef: I looked for what you asked about as well and found this article:

    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. feddiriko
    Permalink to comment#

    This one is on mouseover:

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

  13. Jonathan Neufeld
    Permalink to comment#

    Much simpler and more correct:


    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. MuqMan
    Permalink to comment#

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

  15. bhojpuri song (@bhojpuriblogger)
    Permalink to comment#

    ohh it was helpful

  16. Dody Farial
    Permalink to comment#

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

  17. Laravel

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

  18. Rodrigo Canales
    Permalink to comment#

    It worked for me. thanks

  19. Quran
    Permalink to comment#

    Thanks for this, it helps too!

  20. steven
    Permalink to comment#

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

  21. 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!

  22. Kauser
    Permalink to comment#

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

  23. Ken Rich
    Permalink to comment#

    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 (, 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 –

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

  24. ryhan
    Permalink to comment#

    works Great

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

    • jayism
      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

  25. Nathan
    Permalink to comment#

    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.


  26. Mohsen
    Permalink to comment#

    Thank you,
    It works everywhere even in chrome!

  27. Salvador Guzman
    Permalink to comment#


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

  29. Sandeep
    Permalink to comment#

    Thanks for this snippet. Does what I want.

  30. sancoLgates
    Permalink to comment#

    Great, it works!


  31. vikash
    Permalink to comment#

    is there any way to copy the text area in clipboard

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed