jquery获取和失去焦点改变样式

最新推荐文章于 2024-09-11 15:33:18 发布

9栋108

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量139

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/adaonling/p/5214252.html

版权

jquery获取和失去焦点改变样式

第一种：（文本框获取焦点后，它的颜色会有所变化，当失去焦点的时候，恢复为原来的样子）

<html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <style type="text/css">
        input:focus ,textarea:focus{
            border: 1px solid #f00;
            background: #fcc;
        }
    </style>
    
<body>
    <form action="#" method="POST" id="regForm">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="username">名称：</label>
                <input id="username" type="text">
            </div>
            <div>
                <label for="pass">密码：</label>
                <input id="pass" type="password">
            </div>
            <div>
                <label for="msg">详细信息：</label>
                <textarea id="msg"></textarea>
            </div>
            
        </fieldset>
    </form>

</body>
</html>

只不过IE中不兼容

第二种IE兼容：

 1 <html>
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 3     <script type="text/javascript" src="jquery-1.11.3.js"></script>
 4     <style type="text/css">
 5         
 6         .focus{
 7             border: 1px solid #f00;
 8             background: #fcc;
 9         }
10     </style>
11      <script type="text/javascript">
12         $(function(){
13             $(":input").focus(function(){
14                 $(this).addClass("focus")
15             }).blur(function(){
16                 $(this).removeClass("focus");
17             })
18         })
19         
20      </script>
21 <body>
22     <form action="#" method="POST" id="regForm">
23         <fieldset>
24             <legend>个人基本信息</legend>
25             <div>
26                 <label for="username">名称：</label>
27                 <input id="username" type="text">
28             </div>
29             <div>
30                 <label for="pass">密码：</label>
31                 <input id="pass" type="password">
32             </div>
33             <div>
34                 <label for="msg">详细信息：</label>
35                 <textarea id="msg"></textarea>
36             </div>
37             
38         </fieldset>
39     </form>
40 
41 </body>
42 </html>

posted on 2016-02-24 19:12 adaonline 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/adaonling/p/5214252.html

9栋108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery获取和失去焦点改变样式

jquery获取和失去焦点改变样式第一种：（文本框获取焦点后，它的颜色会有所变化，当失去焦点的时候，恢复为原来的样子）<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script ...
复制链接

扫一扫