highlight all text in textarea

Question

I want to select all of the text inside of a textarea when a user clicks the textarea. I tried onclick="this.focus()", but this didn't do anything. I tried onclick="this.highlight()", but this caused an error. What should I do?

Answer 1

This may annoy your users since it prevents the useful default behaviour of placing the caret where the user clicked and I therefore recommend against it in general. That said, the solution for most browsers is onclick="this.select()".

However, this will not work in Chrome [UPDATE February 2014: it does now seem to work in recent versions of Chrome]. For a workaround and general background on this issue, see the following question: jQuery - select all text from a textarea

Answer 2

onclick="this.focus();this.select()" readonly="readonly"

Answer 3

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

Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </textarea>

I got this code here

Answer 4

onclick="this.focus()" is redundant, as the focus() method is the same as clicking in the textarea (but it places the cursor at the end of the text).

highlight() isn't even a function, unless of course you created it somewhere else.

Conclusion: do this.select()

Answer 5

Seem to more browsers supporting setSelectionRange() than select()

1 way: - Use setSelectionRange()

https://caniuse.com/#search=setSelectionRange

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () {
        
        if(my_textarea.value !== ""){
            

            my_textarea.onfocus = function () {
                my_textarea.setSelectionRange(0, my_textarea.value.length);
                my_textarea.onfocus = undefined;
            } 
            my_textarea.focus();        
            
        }   

    }

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>

2 way: - Use select()

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select#browser_compatibility

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () {
        
        if(my_textarea.value !== ""){
            

            my_textarea.onfocus = function () {
                my_textarea.select();
                my_textarea.onfocus = undefined;
            } 
            my_textarea.focus();        
            
        }   

    }

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>

Answer 6

To complete other answers perhaps you would like to copy the code/text you've just clicked, so use:

onclick="this.focus();this.select();document.execCommand('copy')"

Answer 7

You have to use the .focus() as well as the .select() Javascript function to achieve the desired result.

Check the link below for an example:

http://www.plus2net.com/javascript_tutorial/textarea-onclick.php

Answer 8

const elem = document.elementFromPoint(clientX, clientY)
if (elem.select) { // Make sure the method exists.
  elem.focus()
  elem.select()
}

You may not want to spend time finding your object.

For example, you have written extensions to inject scripts into the web page.

At this time, you do not need to consider the element ID that you can apply immediately.

Example

<textarea rows="3" style="width:200px">"Double click" or Press "F4" to select all text</textarea>
<script>

  let clientX, clientY
  document.addEventListener("mousemove", (e) => {
    clientX = e.clientX
    clientY = e.clientY
  })

  selectAllFunc = () => {
    const elem = document.elementFromPoint(clientX, clientY)
    if (elem.select) { // Make sure the method exists.
      elem.focus()
      elem.select()
    }
  }

  document.addEventListener("keydown", (keyboardEvent) => {
    if (keyboardEvent.key === "F4") { // && keyboardEvent.ctrlKey
      selectAllFunc()
    }
  })

  document.addEventListener("dblclick", (e) => {
      selectAllFunc()
  })
</script>