»
EnglishFrenchVietnamese

Print - Highlight Active Input - JavaScriptBank.com

Full version: jsB@nk » Form » Highlight Active Input
URL: https://www.javascriptbank.com/highlight-active-input.html

Highlight Active Input © JavaScriptBank.comHighlight text inputs in your forms. Make it easy for your visitors to see where they are.

Full version: jsB@nk » Form » Highlight Active Input
URL: https://www.javascriptbank.com/highlight-active-input.html



CSS
<style type=text/css><!-- 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;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type=text/javascript>/*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;      }    }  }}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<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></fieldset></center><script type="text/javascript"><!--  initInputHighlightScript();//--></script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->