JAVASCRIPT SELECT ALL/HIGHLIGHT ALL TEXT IN TEXT BOX OR TEXTAREA
This tutorial and sample script demonstrates how to add a select all feature where your users simply
click a button and the entire text in a text box or textarea is highlighted/selected. See demo below:
We start off by creating a simple form as below which we name form1 but you can name it anything you want.
<form name="form1" >
<textarea cols="25" rows="10" name="demo">
This is some sample text to show you a demo of how your users
can select all this text by clicking the Select All button below.
</textarea>
<input type="button" name="selectit" value="Select All" >
</form>
Important: You must use input type="button" and not input type="submit" as the latter does not seem
to work (at least not in IE7 anyway).
We then create a function named selectAll which we will place in between the <head> and </head> tags of
the page as follows:
<script type="text/javascript">
function selectAll()
{
We then use DOM to reference our textarea, use the focus() method to give it focus and then the select() method to
select it as follows:
document.form1.demo.focus();
document.form1.demo.select();
As far as the above is concerned, document is your page, form1 is your form name, demo is your textarea name.
We then close the function and script as follows:
}
</script>
The full script code is as follows:
<script type="text/javascript">
function selectAll()
{
document.form1.demo.focus();
document.form1.demo.select();
}
</script>
We then add our call to action to the form we created - see red text.
<form name="form1" >
<textarea cols="25" rows="10" name="demo">
This is some sample text to show you a demo of how your users
can select all this text by clicking the Select All button below.
</textarea>
<input type="button" name="selectit" value="Select All" onclick="selectAll
();">
</form>
| 
Home
Computers & Internet
