Onclick selecting all the text of a textarea in JavaScript

We can select the text inside a textarea by clicking inside the textarea. This is required when we want to give a piece of code to the visitors can copy. We will use onClick event to trigger a function and we will keep the code.

text_val.focus();
text_val.select();
document.execCommand("Copy"); // Copy selected text to Clipboard

demo of onclick selection of text inisde textbox

Here is the full code of the script.


<html><head><title>(Type a title for your page here)</title>

<script type="text/javascript">
function select_all()
{
var text_val = document.getElementById('t1');
text_val.focus();
text_val.select();
document.execCommand("Copy");
}
</script>

</head>
<body >

<form name=form1 method=post action=''''>
<textarea name=type rows=3 cols=35 onClick="select_all();">This text you can select all by clicking here 
</textarea>
 </form>

</body>
</html>

getElementByID and on Mouseup event handler

We can identify the textarea by using ID and handle it by using getElementById function. We will use on mouseup event handler.

Here is the code.

<html><head>
<title>(Type a title for your page here)</title>

<script type="text/javascript">
function select_all()
{
document.getElementById('t1').select();
}
</script>

</head>
<body >

<textarea name=type rows=3 cols=35 onmouseup="select_all();" id=t1>
This text you can select all by clicking here 
</textarea>

</body>
</html>

Event Handling onKeyPress Mouse event

Subscribe to our YouTube Channel here

Bilal	01-04-2013
I want to get this functionality on focus event of textarea instead of click event.

Onclick selection of textbox data

getElementByID and on Mouseup event handler