Full version: jsB@nk » Form » Highlight Active Input
URL: https://www.javascriptbank.com/highlight-active-input.html
Highlight 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
<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--><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--><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-->