码迷,mamicode.com
首页 > Web开发 > 详细

JS练习 改变文本框状态

时间:2016-06-23 22:10:40      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS练习题</title>
 6 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery包-->
 7 </head>
 8 
 9 <body>
10 题目:创建4个文本框,当文本框内没有内容的时候显示白色,有输入内容时换色
11     <div>
12         <!--先在一个div里面创建4个文本框-->
13         <input type="text" class="txt" />
14         <input type="text" class="txt" />
15         <input type="text" class="txt" />
16         <input type="text" class="txt" />
17     </div>
18 </body>
19 <script type="text/javascript">
20 $(document).ready(function(e) {
21         //假日一个使文本框失去焦点的事件
22         $(".txt").blur(function() {
23             if($(this).val().trim() !="")
24             {
25                 $(this).css("background-color","#0FF");    //在文本框内输入内容,文本框的颜色就变成#0FF颜色
26             }
27             else
28             {
29                 $(this).css("background-color","#C0F");//在文本框内不输入内容(进行了去空格处理)或者空字符串,文本框的颜色就变成#C0F颜色
30             }
31         });
32     
33     
34 });
35 
36 
37 
38 </script>
39 </html>

 

JS练习 改变文本框状态

标签:

原文地址:http://www.cnblogs.com/hanqishihu/p/5612084.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!