Hidden text / Search box Image Script

This hidden-text script is used to add temporary help text to html form fields. Help text will disappear automatically while you place the cursor in html form field. This script is also called as search box image script.

Features

User can display their desired help text value in html form fields.
Html form field value may be hidden text or hidden image.

Preview

     Example 1: Custom Search    set classname as 'displaytext' for textfield


     Example 2: Set date              set classname as 'displaytext' for textfield


     Example 3: Set image           set classname as 'displayimg' for textfield

Downloads

<html>
<head>
<style type="text/css">
.displaytext{opacity: 0.5; filter: alpha(opacity = 50);}
.normaltext{opacity: 1; filter: alpha(opacity = 100); }
.displayimg{ filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;background:url(hscripts.gif); }
</style>
<script type="text/javascript">
function hiddenText(iid,value,classname)
{
document.getElementById(iid).value=value;
document.getElementById(iid).className=classname;
}
function displayText(iid,value,classname)
{
if(document.getElementById(iid).value =="")
{
document.getElementById(iid).value=value;
document.getElementById(iid).className=classname;
}
}
</script>
</head>
<body>
<center>
<input type="text" id="text1" value="example" size="10" class='displaytext' onfocus="hiddenText(this.id,'','normaltext')" onblur="displayText(this.id,'example','displaytext')">
</center>
</body>
</html>

Release Date - 24-12-2008
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy the code and paste it into your web-page.
If you want to display Html form field value as text, set text box style(classname) as displaytext.

For example,
<input type="text" id="text1" value="example" size="10" class="displaytext"
 onfocus="hiddenText(this.id,' ','normaltext')" 
onblur="displayText(this.id,'example','displaytext')">

If you want to display Html form field value as image, set text box style(classname) as displayimg.

For example,
 <input type="text" id="text1" value=" " size="10" class="displayimg"
     onfocus="hiddenText(this.id,' ','normaltext')" onblur="displayText(this.id,' ','displayimg')">

If you require to use this hiddentext/search box image javascript for more textbox, Set id,value and classname for each html form field textbox.
The hiddenText() function is used to hide default value and show the typed value. Here the arguments are searchbox(text box) id, value and classname.
The displayText() function is used to hide typed value and show the default value. Here the arguments are searchbox(text box) id, value and classname.