Clear default text onClick & restore if nothing is entered

Posted on: October 25, 2008

Sometimes we need to set a default text on our form to give the user an idea about the text field. Suppose the google search box where the default text is Google when you click on it it will be disappeared and it checks on onblur event whether it is Google or not. If anything other than Google / Blank is written that it keeps it or it recall the text Google. Now how can we do that?

Here you go:

Step-1: set the following javascript code snippet in the head section of your HTML/PHP file

<script type=”text/javascript”>
function clickclear(thisfield, defaulttext) {
if (thisfield.value == defaulttext) {
thisfield.value = “”;
function clickrecall(thisfield, defaulttext) {
if (thisfield.value == “”) {
thisfield.value = defaulttext;

Step-2: Now write your input text field as given below:

<input type=”text” name=”ielts” size=”10″ value=”IELTS score” onclick=”clickclear(this, ‘IELTS score’)” onblur=”clickrecall(this,’IELTS score’)” />

and you are done :d


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

I am Nurul Ferdous a Zend Certified Engineer (ZCE), serving at Bangladesh Internet Press Limited (BIPL) as programmer. I am a FOSS advocate and love RnD.


Me @ LinkedIn

View Nurul Ferdous's profile on LinkedIn

My Photos @ Flickr

Blog Stats

  • 42,882 [ Vistors ]

My Twitter Updates

%d bloggers like this: