突出显示文本区域中的所有文本

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

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 6

要完成其他答案，您可能希望复制刚刚单击的代码/文本，因此请使用：

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

Answer 7

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://caniuse.com/#search=select

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