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>


  • 相关阅读:
    Jmeter响应断言的处理。
    Jmeter超时处理。
    HTTP协议简介以及特点。
    自动化测试面试技巧。
    父类构造方法有无参数对子类的影响。
    自动化分层思想分析1.
    设计模式
    遍历课程列表代码。
    如何遍历当前页课程定位分析,以及代码编写。
    “笨方法”学习Python笔记(1)-Windows下的准备
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5497818.html
Copyright © 2011-2022 走看看