美文网首页网页前端后台技巧(CSS+HTML)码农的世界互联网科技
前端学习代码实例-input文本框焦点背景变色

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

作者: 560b7bb7b879 | 来源:发表于2019-04-19 23:04 被阅读5次

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

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

    代码实例如下:

    
    <!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>
    
    

    相关文章

      网友评论

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

        本文链接:https://www.haomeiwen.com/subject/mxqhgqtx.html