前端学习代码实例-input文本框焦点背景变色

广告位

很多网页表单设计中,当文本框获得焦点的时候会改变它的样式属性,可以提高文本框的辨识度。 下面以设置背景色为例子…

前端学习代码实例-input文本框焦点背景变色

很多网页表单设计中,当文本框获得焦点的时候会改变它的样式属性,可以提高文本框的辨识度。

下面以设置背景色为例子,对此功能做一下简单介绍。

代码实例如下:

 <!DOCTYPE html>  <html>  <head>  <meta charset=" utf-8">  <meta name="author" content="http://www.softwhy.com/" />  <title>web前端开发学习q群:731771211   详细教程讲解</title>  <style type="text/css"> .bg{background-color:red;} </style> <script>   window.onload=function(){     var inputs=document.getElementsByTagName("input");   for(var i=0;i<inputs.length;i++){     inputs[i].onfocus = function (){       this.className="bg";      }      inputs[i].onblur=function(){        this.className="";      }   } }   </script>   </head>   <body>   <form id="myform" action="#">   <ul>     <li>用户名:<input type="text" name="username" /></li>     <li>密码:<input type="text" name="pw" /></li>   </ul>   </form>   </body>   </html>  

关于作者: 疯子程序员

为您推荐