Highlight The Active Text Input Fields.

[TavoxPeru 0]

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:

Paste this code into the CSS section of your HTML document

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;}

Paste this code into an external JavaScript file named: highlight-active-input.js.js

/* Created by: Alf Magne Kalleland :: http://www.dhtmlgoodies.com/ (C) http://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;	  }	}  }}

Paste this code into the HEAD section of your HTML document

<script type="text/javascript" src="highlight-active-input.js.js"></script>

Paste this code into the BODY section of your HTML document

<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>

Paste this code at the bottom of your HTML document

<script type="text/javascript"><!--  initInputHighlightScript();//--></script>

Best regards,

[Arbitrary 0]

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.