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