Input: Clear text

Heres a JavaScript function that I use on alot of my websites. It allows you to set a default value in an input, but when the user clicks the field it will automatically clear this default text. Additionaly, If the user does not type anything in this input the default value will re-appear.

Example:


Nifty eh?

Now heres how its done.

Firstly, you will need to add these two JavaScript functions to your page. Just add them between your <HEAD> </HEAD> tags, like this:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<HEAD>
<script type="text/javascript">
function clickclear(thisfield, defaulttext) {
	if (thisfield.value == defaulttext) {
		thisfield.value = "";
	}
}
function clickrecall(thisfield, defaulttext) {
	if (thisfield.value == "") {
		thisfield.value = defaulttext;
	}
}
</script>
</HEAD>

Okay, now what?

Now we are ready to use our spiffy new functions anywhere on our site! All we have to do is add a little code to the <input> you would like to use, Like this:

1
<input type="text" name="myfield" onclick="clickclear(this, 'Click here to search')" onblur="clickrecall(this,'Click here to search')" value="Click here to search" />

The only part you may want to change is the text value itself ( Click here to search for this example).

 
 
Leave A Reply Here

  Username [*]

  Email Address [*]

  Website

Subscribes to this post comments updates

Please Note: All comments maybe under going moderation so there is no need to resubmit the comments. it will appeared when admin approved it, feel free to subscribes to the post comments rss to stay update