highlight all text in textarea
JavascriptJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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: https://stackoverflow.com/questions/5797539/jquery-select-all-text-from-a-textarea/5797700#5797700
Solution 2 - Javascript
onclick="this.focus();this.select()" readonly="readonly"
Solution 3 - Javascript
<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
Solution 4 - Javascript
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()
Solution 5 - Javascript
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>
Solution 6 - Javascript
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
Solution 7 - Javascript
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')"
Solution 8 - Javascript
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>