JS练习改变文本框状态

 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>

posted @ 2016-06-23 20:14 孤独夜莺阅读(992) 评论(0) 收藏举报

刷新页面返回顶部

JS练习 改变文本框状态

JS练习改变文本框状态