实现效果：将鼠标聚焦到邮箱地址文本框时，文本框 内的“请输入邮箱地址”文字将被清除；
若没有输入任何内容，鼠标移除后邮箱地址文本框被还原。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>注册</title> 6 <!-- <link rel="stylesheet" href="css/default.css" type="text/css" /> --> 7 8 <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script> 9 <script type="text/javascript"> 10 $(function(){ 11 $("#mailaddress").focus(function(){ 12 var txt_val = $(this).val(); 13 if (txt_val == "请输入邮箱地址") { 14 $(this).val(""); 15 } 16 }); 17 18 $("#mailaddress").blur(function(){ 19 var txt_val = $(this).val(); 20 if (txt_val == "") { 21 $(this).val("请输入邮箱地址"); 22 } 23 }); 24 $("#password").focus(function(){ 25 var txt_val = $(this).val(); 26 if (txt_val == "请输入邮箱密码") { 27 $(this).val(""); 28 } 29 }); 30 31 $("#password").blur(function(){ 32 var txt_val = $(this).val(); 33 if (txt_val == "") { 34 $(this).val("请输入邮箱密码"); 35 } 36 }); 37 38 39 }); 40 </script> 41 </head> 42 <body> 43 <input type="text" id="mailaddress" value="请输入邮箱地址"/> <br/><br/> 44 <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> 45 <input type="button" value="登录"/> 46 </body> 47 </html>