Javascript 突出显示 textarea 中的所有文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7313786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlight all text in textarea
提问by Carl
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?
当用户单击文本区域时，我想选择文本区域内的所有文本。我试过了onclick="this.focus()"，但这没有做任何事情。我试过了onclick="this.highlight()"，但这导致了错误。我该怎么办？
回答by Tim Down
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()".
这可能会惹恼您的用户，因为它会阻止将插入符号放置在用户单击的位置的有用默认行为，因此我通常建议不要这样做。也就是说，大多数浏览器的解决方案是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
但是，这在 Chrome 中不起作用[2014 年 2 月更新：它现在似乎在最新版本的 Chrome 中工作]。有关此问题的解决方法和一般背景，请参阅以下问题：jQuery - select all text from a textarea
回答by ma?o
onclick="this.focus();this.select()" readonly="readonly"
回答by Julia
<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
我在这里得到了这个代码
回答by fireshadow52
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).
onclick="this.focus()"是多余的，因为该focus()方法与在 textarea 中单击相同（但它将光标放在文本的末尾）。
highlight()isn't even a function, unless of course you created it somewhere else.
highlight()甚至不是一个函数，当然除非你在其他地方创建了它。
Conclusion: do this.select()
结论：做 this.select()
回答by Bassem
You have to use the .focus() as well as the .select() Javascript function to achieve the desired result.
您必须使用 .focus() 以及 .select() Javascript 函数来实现所需的结果。
Check the link below for an example:
查看下面的链接以获取示例：
http://www.plus2net.com/javascript_tutorial/textarea-onclick.php
http://www.plus2net.com/javascript_tutorial/textarea-onclick.php
回答by Ignacio Ara
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')"
回答by Юрий Светлов
Seem to more browsers supporting setSelectionRange()than select()
似乎更多的浏览器支持setSelectionRange()超过select()
1 way: - Use setSelectionRange()
1 种方式： - 使用 setSelectionRange()
https://caniuse.com/#search=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()
2 种方式： - 使用 select()
https://caniuse.com/#search=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>