Onclick selecting all the text of a textarea in JavaScript

Onclick selection of textbox data

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

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>

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com