首先看效果
默认状态下
获取焦点状态下
什么也没输入，离开
有输入离开
输入默认值离开
代码
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>
