FREE JavaScript - Hidden text / Search box image Script, HTML form field help text- HIOX

About

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.

Feature

a) User can display their desired help text value in html form fields.
b) 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

Code

  <!-- Script by hscripts.com -->
  <!-- Copyright of HIOXINDIA -->
  <!-- More scripts @www.hscripts.com -->
  <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>
  <!--   Script by hscripts.com    -->

Release Date - 24-12-2008

Get free version without ©copyright link for just 5

Usage

a) Copy the code and paste it into your web-page.
b) 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')">
c) 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')">
d) 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.
e) 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.
f) 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.

License

- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.

Hidden text / Search box Image Script