CODEWITHSUNDEEP
javascript
Carl
Carl

Reputation: 631

highlight all text in textarea

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?

Upvotes: 63

Views: 61570

Answers (8)

Tim Down
Tim Down

Reputation: 324487

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

Upvotes: 66

Юрий Светлов
Юрий Светлов

Reputation: 1750

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>

Upvotes: 4

Carson
Carson

Reputation: 7948

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>

Upvotes: 1

Ignacio Ara
Ignacio Ara

Reputation: 2582

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')"

Upvotes: 3

maťo
maťo

Reputation: 1302

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

Upvotes: 34

Julia
Julia

Reputation: 171

<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

Upvotes: 16

Bassem
Bassem

Reputation: 3175

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

Upvotes: 2

fireshadow52
fireshadow52

Reputation: 6516

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()

Upvotes: 5

Related Questions