本文通过一个简单的HTML页面展示了如何使用JavaScript实现当输入框获得焦点时，旁边的文本进行颜色和样式的改变，以此作为一种视觉反馈。
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.note1{font-size:11pt;}
.note2{font-size:11pt;border:1px solid #ff0000;background-color:#000000;color:#ffffff;}
</style>
<script>
function change(id)
{
var lang;
lang=document.getElementById("lang"+id).className="note2";
}
function change1(id)
{
var lang;
lang=document.getElementById("lang"+id).className="note1";
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<table width="90%" border="0" cellspacing="0" cellpadding="10" align="center">
<tr>
<td align="center">
<input type="text" name="textfield" onFocus="change(1)" onBlur="change1(1)">
</td>
<td>
<div align="center" id="lang1" class="note1" style="width:100px;height:20px;">披着羊皮的狼</div>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="textfield2" onFocus="change(2)" onBlur="change1(2)">
</td>
<td>
<div align="center" id="lang2" class="note1" style="width:100px;height:20px;">披着羊皮的狼</div>
</td>
</tr>
<tr>
<td align="center">
<input type="text" name="textfield3" onFocus="change(3)" onBlur="change1(3)">
</td>
<td>
<div align="center" id="lang3" class="note1" style="width:100px;height:20px;">披着羊皮的狼</div>
</td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
