zoukankan      html  css  js  c++  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设置边框的样式,当文本框失去焦点的时候就会将样式清空。

    后来都会美好的!
  • 相关阅读:
    Redis最佳实践:7个维度+43条使用规范,带你彻底玩转Redis | 附实践清单
    laravel生命周期
    日志写入
    商城表设计
    10个你不一定知道的PHP内置函数
    PHP函数详解:call_user_func()使用方法
    Dingo与JWT的使用
    商城-会员与用户的数据表设计
    MVVM模式
    vue面试题
  • 原文地址:https://www.cnblogs.com/momox/p/5090687.html
Copyright © 2011-2022 走看看