事件监听

最新推荐文章于 2024-09-10 13:21:46 发布

转载最新推荐文章于 2024-09-10 13:21:46 发布 · 577 阅读

文章标签：

#input #class #border #function #action #null

本文介绍了一个简单的HTML页面中实现输入框样式切换的功能。通过JavaScript控制不同输入框的边框颜色变化，增强了用户交互体验。文章提供了完整的代码示例，包括HTML结构、内联样式以及JavaScript逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<META http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
.a{border: 1px #E7EFF7 solid;}
.b{border: 1px red solid;}
</style>
<script>
var clickId;
function ChangClass(id)
{
if(document.getElementById(clickId) != null )
document.getElementById(clickId).className = "a";
document.getElementById(id).className = "b";
clickId = id;
}

window.onload = function(ev)
{
var box = document.getElementById("form1");
box.onclick = function(ev)
{
  ev = ev || window.event;
  var element = ev.target || ev.srcElement;
  if(element.tagName == "INPUT");
   ChangClass(element.id);
}
}
</script>
<form id="form1" name="form1" method="post" action="" >
<label>
<input type="text" name="textfield" class="a" id="I1">
</label>
1
<p>
   <input type="text" name="textfield" class="a" id="I2" />
2</p>
<p>
    <input type="text" name="textfield" class="a" id="I3" />
3</p>
<p>
    <input type="text" name="textfield" class="a" id="I4" />
    4
</p>
</form>