你的位置:首页 > Java教程

[Java教程]javascript当文本框获得焦点设置边框


javascript当文本框获得焦点设置边框:
本章节介绍一下当文本框获得焦点以后如何设置文本框的边框样式,本来是一个非常简单的问题,但是有可能前台美工人员对javascript并不是太了解,所以还是通过一个简单的实例介绍一下,以便需要的朋友进行扩展。
代码如下:

 

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <head><title>文本框获得焦点边框变色-蚂蚁部落</title><style type="text/css">ul{ list-style:none; margin:50px;}.mytest{ border:1px solid red;}</style><script type="text/javascript"> window.onload=function(){ var username=document.getElementById("username"); var pw=document.getElementById("pw");   username.onfocus=function(){  this.style.border="1px solid red"; } username.onblur=function(){   this.style.border=""; } pw.onfocus=function(){   this.className="mytest"; } pw.onblur=function(){   this.className=""; }}</script><body><ul>  <li>姓名:<input type="text" id="username" /></li>  <li>密码:<input type="password" id="pw" /></li></ul></body></html>

 

以上代码实现了我们的要求,当鼠标放在文本框的时候,可以实现文本框变色,离开的时候恢复原样。下
面就简单介绍一下实现原理:
为文本框绑定事件处理函数,当文本框获得焦点的时候通过style或者className设置边框的样式,当文本框失去焦点的时候就会将样式清空。上面使用style和className设置文本框的属性,就是为了让阅读者多了解一些内容,希望给大家有所帮助吧。

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

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