你的位置:首页 > Java教程

[Java教程]onfocus和onblur应用代码实例

onfocus和onblur应用代码实例:
这两个事件总感觉应用是最频繁的,尽管非常简单,也许初学者对两者还不够熟悉,所以下面就通过实例简单介绍一下它们的用法。
代码实例如下:

<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="author" content="http://www.softwhy.com/" /><title>onblur和onfocus事件-蚂蚁部落</title><style type="text/css">li{ height:30px; list-style:none; font-size:12px;}li input{ width:120px; height:15px;}</style><script type="text/javascript">function focusH(){ this.style.backgroundColor="#CCC"; this.style.color="green";}function blurH(){ this.style.backgroundColor="red"; this.style.color="yellow";}window.onload=function(){ var userName=document.getElementById("userName"); var pw=document.getElementById("pw");   userName.onfocus=focusH; userName.onblur=blurH;   pw.onfocus=focusH; pw.onblur=blurH;}</script></head><body><div> <ul>  <li>姓名:<input type="text" id="userName" /></li>  <li>密码:<input type="password" id="pw" /></li> </ul></div></body></html>

以上代码中,当文本框和密码框获得焦点或者失去焦点的时候,都能够对背景颜色和字体颜色进行相应的设置。
关于onfocus事件和onblur事件这里就不多介绍了,可以参阅相关阅读。
相关阅读:
1.onfocus事件可以参阅javascript的onfocus事件一章节。
2.onblur事件可以参阅javascript的onblur事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8864

更多内容可以参阅:http://www.softwhy.com/javascript/