val()
当鼠标放上去的时候,文本消失,鼠标拿开,文本恢复
效果图:
code as below:
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <script src="Scripts/jquery-1.11.2.js" type="text/javascript"></script> 4 <script type="text/javascript"> 5 6 $(function () { 7 //var p_html = $("p").html(); //html() 同js中的innerHTML属性 8 //alert(p_html); 9 10 //var p_text = $("p").text(); //text() 同js中的innerText属性 11 //alert(p_text); 12 13 14 //对地址框进行操作 15 $("#address").focus(function () { //获得鼠标焦点 focus()同js中的onfocus()方法 16 var txt_value = $(this).val(); 17 if (txt_value == "请输入邮箱地址") { 18 $(this).val(""); 19 } 20 }); 21 22 $("#address").blur(function () { //失去鼠标焦点 blur()同js中的onblur()方法 23 var txt_value = $(this).val(); 24 if (txt_value == "") { 25 $(this).val("请输入邮箱地址"); 26 } 27 }); 28 29 //对密码框进行操作 30 $("#password").focus(function () { 31 var txt_value = $(this).val(); 32 if (txt_value == "请输入邮箱密码") { 33 $(this).val(""); 34 } 35 }); 36 37 $("#password").blur(function () { 38 var txt_value = $(this).val(); 39 if (txt_value == "") { 40 $(this).val("请输入邮箱密码"); 41 } 42 }); 43 44 45 //使用defaultValue 46 //地址框 47 $("#address").focus(function () { 48 var txt_value = $(this).val(); 49 if (txt_value == this.defaultValue) { //this.defaultValue就是当前文本框的默认值 50 $(this).val(""); 51 } 52 53 }); 54 $("#address").blur(function () { 55 var txt_value = $(this).val(); 56 if (txt_value == "") { //this.defaultValue就是当前文本框的默认值 57 $(this).val(this.defaultValue); 58 } 59 60 }); 61 62 //密码框同上 63 64 }); 65 </script> 66 <title></title> 67 </head> 68 <body> 69 <form id="form1" runat="server"> 70 <div> 71 <p title="选择你最喜欢的水果"> 72 <strong>你最喜欢的水果是?</strong></p> 73 <input type="text" id="address" value="请输入邮箱地址" /><br /> 74 <input type="text" id="password" value="请输入邮箱密码" /><br /> 75 <input type="button" value="登陆"/> 76 </div> 77 </form> 78 </body> 79 </html>