Highlight The Active Text Input Fields.

1. Paste this code into the CSS section of your HTML document
   
   CODE
   fieldset {
     width: 350px;
   }
   
   .textInput,textarea {
     width: 200px;
     font-family: arial;
     background-color: #FFFFFF;
     border: 1px solid #000;
   }
   
   .inputHighlighted {
     width: 200px;
     background-color: #FFCE31;
     color: #000;
     border: 1px solid #000;
   }
   
   
   
2. Paste this code into an external JavaScript file named: highlight-active-input.js.js
   
   CODE
   /* Created by: Alf Magne Kalleland :: www.dhtmlgoodies.com (C) www.dhtmlgoodies.com, November 2005 */
   
   var currentlyActiveInputRef = false;
   var currentlyActiveInputClassName = false;
   
   function highlightActiveInput() {
     if(currentlyActiveInputRef) {
       currentlyActiveInputRef.className = currentlyActiveInputClassName;
     }
     currentlyActiveInputClassName = this.className;
     this.className = 'inputHighlighted';
     currentlyActiveInputRef = this;
   }
   
   function blurActiveInput() {
     this.className = currentlyActiveInputClassName;
   }
   
   function initInputHighlightScript() {
     var tags = ['INPUT','TEXTAREA'];
     for(tagCounter=0;tagCounter<tags.length;tagCounter++){
       var inputs = document.getElementsByTagName(tags[tagCounter]);
       for(var no=0;no<inputs.length;no++){
         if(inputs[no].className && inputs[no].className=='doNotHighlightThisInput')continue;
         if(inputs[no].tagName.toLowerCase()=='textarea' || (inputs[no].tagName.toLowerCase()=='input' &&
   
   inputs[no].type.toLowerCase()=='text')){
           inputs[no].onfocus = highlightActiveInput;
           inputs[no].onblur = blurActiveInput;
         }
       }
     }
   }
   
   
   
   
3. Paste this code into the HEAD section of your HTML document
   
   CODE
   <script type="text/javascript" src="highlight-active-input.js.js"></script>
   
   
   
4. Paste this code into the BODY section of your HTML document
   
   CODE
   <form method="post" action="#">
   <fieldset>
   <legend>Highlight active input</legend>
   <table>
     <tr>
       <td><label for="name">Name:</label></td>
       <td><input class="textInput" type="text" name="name" id="name"></td>
     </tr>
     <tr>
       <td><label for="email">E-mail:</label></td>
       <td><input class="textInput" type="text" name="email" id="email"></td>
     </tr>
     <tr>
       <td><label for="comment">Comments:</label></td>
       <td><textarea id="comment" name="comment" rows="3"></textarea></td>
     </tr>
     <tr>
       <td colspan="2">
         <input type="submit" onclick="return false" value="Submit">
       </td>
     </tr>
   </table>
   </fieldset>
   </form>
   
   
   
5. Paste this code at the bottom of your HTML document
   
   CODE
   <script type="text/javascript">
   <!--
     initInputHighlightScript();
   //-->
   </script>
   

Comment/Reply (w/o sign-up)

Comment/Reply (w/o sign-up)