使用JavaScript控制当前文本输入框高亮显示

最新推荐文章于 2024-08-21 18:03:01 发布

Zoe_Wang_ing

最新推荐文章于 2024-08-21 18:03:01 发布

阅读量1.7k

点赞数

分类专栏： js

js 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

<!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" οnclick="return false" value="Submit">
</td>
</tr>
</table>
</fieldset>
</form>
<script type="text/javascript">
initInputHighlightScript();
</script>
</body>
</html>