JS练习 改变文本框状态

时间：2022-07-03 23:53:13
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>JS练习题</title>

 <script src="../jquery-1.11.2.min.js"></script><!--引入jquery包-->

 </head>

 <body>

 题目：创建4个文本框，当文本框内没有内容的时候显示白色，有输入内容时换色

     <div>

         <!--先在一个div里面创建4个文本框-->

         <input type="text" class="txt" />

         <input type="text" class="txt" />

         <input type="text" class="txt" />

         <input type="text" class="txt" />

     </div>

 </body>

 <script type="text/javascript">

 $(document).ready(function(e) {

         //假日一个使文本框失去焦点的事件

         $(".txt").blur(function() {

             if($(this).val().trim() !="")

             {

                 $(this).css("background-color","#0FF");    //在文本框内输入内容，文本框的颜色就变成#0FF颜色

             }

             else

             {

                 $(this).css("background-color","#C0F");//在文本框内不输入内容（进行了去空格处理）或者空字符串，文本框的颜色就变成#C0F颜色

             }

         });

 });

 </script>

 </html>

相关文章