Welcome Guest ( Log In | Register )




                Web Hosting Guide

 
Reply to this topicNew Topic
Highlight The Active Text Input Fields.
TavoxPeru
post Jul 16 2006, 06:58 AM
Post #1


Super Member
Group Icon

Group: [HOSTED]
Posts: 876
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
myCENTs:13.21


Hi, this nice script highlight text inputs fields in your forms, so it will help your visitors to see where they are. Follow this steps to install it:
  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>
Best regards,
Go to the top of the page
 
+Quote Post
Arbitrary
post Jul 16 2006, 07:05 AM
Post #2


Premium Member
Group Icon

Group: [HOSTED]
Posts: 381
Joined: 17-June 06
From: Adblock life
Member No.: 13,992


I've seen something of the sort before on Dynamic Drive. Its just that the particular script I saw didn't allow you to attach it in an external JavaScript -- instead, you had to repaste the Javascript snippet in every single HTML document you wanted to use, which turned out to be quite a hassle. So this is a nice improvement on that.

Highlighting forms can definitely be very useful, especially on a form with many boxes to fill out. It makes it easier to figure out which boxes you have yet to fill out and which ones you have already filled out. Speaking of checking empty boxes, it might be nicer if there was a script that highlighted missing fields as the user moved on to the next field. For instance, suppose I filled out first name and then date but neglected to fill out last name, right when I click in the date field, the script should highlight the last name field and tell me I missed it. That makes it a lot better than last minute reminders after I have already filled out the form.
Go to the top of the page
 
+Quote Post

Reply to this topicNew Topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts 0 Swisoon 39 30th October 2009 - 02:18 PM
Last post by: Swisoon
No New Posts   6 szupie 2,685 30th October 2009 - 01:06 PM
Last post by: Quatrux
No New Posts   5 starscream 43 30th October 2009 - 07:31 AM
Last post by: starscream
No New Posts   17 vdhieu84 6,761 29th October 2009 - 07:44 PM
Last post by: iG-
No New Posts   14 Grafitti 3,016 26th October 2009 - 06:34 AM
Last post by: iG-Khalid Mehmood Awan
No New Posts   2 Miles 716 12th October 2009 - 12:49 PM
Last post by: iG-John Rivera
No New Posts   10 bob3695 8,157 12th October 2009 - 06:38 AM
Last post by: iG-Sewe Oyaya
No New Posts   9 Koel 2,955 12th October 2009 - 12:58 AM
Last post by: levimage
No New Posts   2 jedipi 3,326 8th October 2009 - 08:47 AM
Last post by: iG-Neville
No New Posts   8 kc8ual 2,556 5th October 2009 - 08:56 PM
Last post by: HannahI
No New Posts   12 bnbrown 3,186 1st October 2009 - 08:33 PM
Last post by: iG-delilah !
No New Posts   1 thanatos1 105 7th September 2009 - 06:52 PM
Last post by: Curt200518
No New Posts   3 Curt200518 216 7th September 2009 - 06:47 PM
Last post by: Curt200518
No New Posts 13 OpaQue 5,710 29th August 2009 - 04:43 AM
Last post by: skedad
No New Posts   4 clovis 1,757 24th August 2009 - 09:17 AM
Last post by: iG-neetu


Web Hosting Powered by ComputingHost.com.