To clear text from a pre-seeded textarea or input text on a mouse click, you have to use some javascript. Luckily, it’s very simple to implement this bit of javascript. This short tutorial will show you how and explain what the code used means.

Example (click on the textarea and the pre-seeded text “This text will disappear when you click the textarea with the mouse” will be cleared):

The codes used for this is as follows

<form name="myform">
<textarea name="mytext" cols="30" rows="5"
onclick="document.myform.mytext.value='';">
This text will disappear when you click the textarea with the mouse</textarea>
</form>

The first line opens a html form tag with the name “myform”. You will need to name the form as you will be referencing this form using javascript, an object orientated programming language. The name of the form is not important, you can call it whatever you like, but it does have to be a unique name.

The second line opens a textarea with the name “mytext’. Again, the name of the textarea is not important as long as it’s unique. The second line also sets the size of the textarea, in this case, it has 30 columns and 5 rows.

The third line is the javascript that clears the textarea when the textarea is selected by the mouse pointer. “onclick” is a preset javascript event that does exactly what it’s named. On a mouse click, do something. Because javascript is object orientated, you can actually get another object, such as a different form, to react when the textarea is clicked, for now, we want to manipulate the textarea we clicked, so we have to reference it.

document.myform.mytext.value='’ means in this document, in the object “myform” and within that object, look for the object “mytext” and then look for the attribute “value”, then set this value to ‘’ (null or nothing).

The fourth line is the pre-seeded message that shows up when the page loads. After you click the textarea, this message will disappear. The textarea tag is also closed on this line.

The fifth line closes the form tag.