首先看效果

默认状态下

获取焦点状态下

什么也没输入，离开

有输入离开

输入默认值离开

代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Insert title here</title>
 6     <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
 7     <script type="text/javascript">
 8         //jQuery的页面加载完成时触发的事件
 9         $(document).ready(function(){
10             
11             $("input[type='text']").on("blur focus",function(){
12                 var defaultvalue = $(this).attr("defaultvalue");
13                 
14                 //判断是否获取焦点
15                 if($(this).is(":focus")){
16                     //把输入框里面的文字颜色变为黑色
17                     $(this).css("color", "#000");
18                     //如果之前的内容是默认值，那么清空
19                     if($(this).val() == defaultvalue){
20                         $(this).val("");
21                     }
22                 }else{//失去焦点
23                     //判断内容是空的或默认值
24                     if($(this).val() == "" || $(this).val() == defaultvalue){
25                         //设置为默认值
26                         $(this).val(defaultvalue);
27                         //文字颜色设置为灰色
28                         $(this).css("color", "#999");
29                     }else{
30                         //文字设置为黑色
31                         $(this).css("color", "#000");
32                     }
33                 }
34             });
35         });
36     </script>
37 </head>
38 <body>
39     <a href="">刷新</a>
40     <input type="text" id="button1" value="请输入账号" defaultvalue="请输入账号" style="color:#999"/>
41     <input type="text" id="button2" value="请输入手机号" defaultvalue="请输入手机号" style="color:#999"/>
42 </body>
43 </html>