zoukankan      html  css  js  c++  java
  • 表单元素焦点的获取和失去

    HTML:
    <!DOCTYPE >

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    * {
    /*margin: 0px;
    padding: 0;*/
    font-family: "微软雅黑", "arial", " sans-serif";
    font-size: 16px;
    }

    body {
    margin: 20px;
    }

    .focus {
    border: 1px solid #f00;
    background: #fcc;
    }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>

    <script type="text/javascript">
    $(function () {
    $(":input")
    .focus(function () {
    $(this).addClass("focus");
    })

    .blur(function () {
    $(this).removeClass("focus");
    })
    });
    </script>
    </head>

    <body>
    <form>
    <fieldset style=" 370px;height: 136px;">
    <legend>登录界面</legend>
    <div>
    <label for="username">用户:</label>
    <input id="username" type="text"/>
    </div>
    <div>
    <label for="pass">密码:</label>
    <input id="pass" type="password"/>
    </div>
    </fieldset>
    </form>

    </body>

    </html>

    result:

    运行:


    HTML:
    <!DOCTYPE >
    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style type="text/css">
    * {
    /*margin: 0px;
    padding: 0;*/
    font-family: "微软雅黑", "arial", " sans-serif";
    font-size: 16px;
    }

    body {
    margin: 20px;
    }

    .focus {
    border: 1px solid #f00;
    background: #fcc;
    }
    </style>
    <script type="text/javascript" src="js/jquery-2.2.2.min.js">
    </script>

    <script type="text/javascript">
    $(function () {
    $(":input").bind({
    focus: function () {
    $(this).addClass("focus");
    },
    blur: function () {
    $(this).removeClass("focus");
    }
    })


    });
    </script>
    </head>

    <body>
    <form>
    <fieldset style=" 370px;height: 136px;">
    <legend>登录界面</legend>
    <div>
    <label for="username">用户:</label>
    <input id="username" type="text"/>
    </div>
    <div>
    <label for="pass">密码:</label>
    <input id="pass" type="password"/>
    </div>
    </fieldset>
    </form>

    </body>

    </html>


  • 相关阅读:
    Java--强制转化
    Java--成绩分类
    建造者模式的应用
    抽象工厂模式的应用
    工厂模式
    第几天
    Stacking Plates(存档待续.....(没有写思路和程序))
    圆的面积
    公孙策和陆湘湘对话(少年包青天第二部第二十集末尾和第二十一集开头部分)
    简单接口回调例子
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5497818.html
Copyright © 2011-2022 走看看