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


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com







    Bilal

    01-04-2013

    I want to get this functionality on focus event of textarea instead of click event.

    Post your comments , suggestion , error , requirements etc here




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer