|
|
|
|
Like this code?
Show the author your appreciation.
|
|
| |
This script can be used to hightlight a form element on recieving focus and remove it on losing focus.
hilite.js
|
var hiliteClass = 'hilightedInputField';
var normalClass = 'inputField';
var hilitedElem = '';
var regExp = /INPUT|OPTION|SELECT|TEXTAREA/;
var ns6=document.getElementById && !document.all
//Function to highlight form element
function hilite(evt){
evt = evt ? evt : window.event;
var currentElem = evt.srcElement ? evt.srcElement : evt.target || evt.currentTarget;
if(currentElem.className && regExp.test(currentElem.tagName)){
//if (ns6&&eventobj.nodeType==3)eventobj=eventobj.parentNode.parentNode
if(hilitedElem)hilitedElem.className = normalClass;
currentElem.className = hiliteClass;
hilitedElem = currentElem;
}
}
function removeHilite(evt){
evt = evt ? evt : window.event;
var currentElem = evt.srcElement ? evt.srcElement : evt.target || evt.currentTarget;
if(currentElem.className && regExp.test(currentElem.tagName)){
currentElem.className = normalClass;
}
} | |
Usage Example (notice the attached images)
|
<!doctype html public "-//w3c//dtd html 4.1 transitional//en">
<html>
<head>
<title>Highlight Form Elements</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="MSSmarttagsPreventParsing" content="TRUE" />
<meta name="robots" content="index,follow" />
<script type="text/javascript" src="hilite.js"></script>
<style>
body, table{font:normal 12px Verdana, Arial, sans-serif;}
.tblTest td{background:#F4F4F9;border:1px #C0C0C0 solid;padding:5px 15px;}
.tblTest td span.comment{color:#999999;font-size:10px;font-style:italic;}
.inputField{width:240px;border:1px #C0C0C0 solid;}
.hilightedInputField{width:240px;background:#F9F9FF;border:1px #333333 solid;}
</style>
</head>
<body bgcolor="#ffffff">
<table style="height:100%;width:100%;">
<tr><td>
<center><form name="frmTest">
<table class="tblTest" cellspacing="2" cellpadding="0" style="">
<tr><td colspan="2" style=""><b>Highlight Form Elements</b></td></tr>
<tr><td>Text Box</td><td><input class="inputField" onfocus="hilite(event)" onBlur="removeHilite(event)" type="text"></td></tr>
<tr><td>Text Box</td><td><input class="inputField" onfocus="hilite(event)" onBlur="removeHilite(event)" type="text"></td></tr>
<tr><td>Text Area</td><td><textarea class="inputField" onfocus="hilite(event)" onBlur="removeHilite(event)" ></textarea></td></tr>
<tr><td>Text Area</td><td><textarea class="inputField" onfocus="hilite(event)" onBlur="removeHilite(event)" ></textarea></td></tr>
</table></form>
</center>
</td></tr></table>
</body>
</html> | |
|
|
| Changing the Style of form objects using the JavaScript OnClick method.
Categories : Java Script, Form Processing, Beginner Guides, CSS | | | JavaScript dropdown list menu to switch any page.
Categories : Java Script, Beginner Guides, Form Processing | | | Show hide table rows to make dynamic forms
Categories : Beginner Guides, Java Script, Form Processing, HTTP | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Table editable dynamic form with edit + selection (select / option) + checkbox.
Categories : Java Script, DHTML, User Interface, CSS, HTML | | | day and week grid with clickable fields on/off and possibility to insert in DB
Categories : PHP, Java Script, CSS | | | Javascript URL and Email Validation
Categories : Java Script, Data Validation, Form Processing, Email, URLs | | | Form Processing : with alert Highlight field name which is not filled by user
Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Higly Customizable Javascript Calendar Script
Categories : Java Script, Calendar, Date Time, HTML, CSS | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | Form validations using javascript and including all validations in one message
Categories : HTML and PHP, Java Script, Form Processing | | | showing Help (assistance) to the user while filling html forms.
Categories : HTML, Java Script, Form Processing | | | Adding a Filter to a Text Element
Categories : Java Script, Data Validation, Form Processing | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | |
|
|
