<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript高亮显示文本输入框</title>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
margin:0px;
padding:0px;
}
.textInput,textarea{
width:300px;
font-family:arial;
background-color:#FFFFFF;
border:1px solid #000;
}
.inputHighlighted{
background-color:#317082;
color:#FFF;
width:300px;
border:1px solid #000;
}
</style>
<script type="text/javascript">
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>
</head>
<body>
<form method="post" action="highlight-active-input.html">
<fieldset>
<legend>文本框高亮</legend>
<table>
<tr>
<td><label for="firstname">姓：</label></td>
<td><input class="textInput" type="text" name="firstname" id="firstname"></td>
</tr>
<tr>
<td><label for="firstname">名字：</label></td>
<td><input class="textInput" type="text" name="lastname" id="lastname"></td>
</tr>
<tr>
<td><label for="address">地址：</label></td>
<td><textarea id="address" name="address" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" onclick="return false" value="Submit">
</td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
initInputHighlightScript();
</script>
</body>
</html>
