Welcome Guest ( Log In | Register )



 
Reply to this topicStart new topic
> Highlight The Active Text Input Fields.
TavoxPeru
post Jul 16 2006, 06:58 AM
Post #1


Super Member
Group Icon

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



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: 361
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 topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Javascript: Text To Texbox And Back To Text(2)
  2. Status Bar Effect(5)
  3. Add Text To Textarea(6)
  4. Vertical Text(1)


 



- Lo-Fi Version Time is now: 22nd August 2008 - 05:32 AM