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>


  • 相关阅读:
    关于Maven项目的pom.xml中的依赖或插件失效的解决方法
    java引用数据类型在方法中的值传递
    java匹配http或https的url的正则表达式20180912
    java正则表达式的进阶使用20180912
    java线程池 多线程 搜索包含关键字的文件路径
    魔术球问题
    [SDOI2009]晨跑
    [洛谷P2045]方格取数加强版
    最小路径覆盖问题
    最长不下降子序列问题
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/5497818.html
Copyright © 2011-2022 走看看