首先看效果
默認狀態下
獲取焦點狀態下
什么也沒輸入，離開
有輸入離開
輸入默認值離開
代碼
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>