CSS:
1 <style> 2 #txt1,#txt2{ color:#CCC; border:1px solid #666;} 3 #pswd{ display:none;border:1px solid #666;} 4 </style>
引用JS库:
1 <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
HTML:
1 <form id="myform" action="#"> 2 地址: 3 <input type="text" id="txt1" value="请输入邮箱地址" /> 4 5 <br /> 6 <br /> 密码: 7 <input type="text" id="txt2" value="请输入邮箱密码" /> 8 <input type="password" id="pswd" /> 9 10 <br /> 11 <br /> 12 <input type="button" id="btn" value="登陆" /> 13 </form>
JS代码:
1 <script type="text/javascript" charset="utf-8"> 2 dlsj('#txt1','请输入邮箱地址','#txt2','#pswd') //调用 3 4 5 function dlsj (txt1,txt1_val,txt2,password) { 6 //邮箱地址输入框获取焦点 7 $(txt1).focus(function(){ 8 var txt1_value=$(txt1).val(); 9 if(txt1_value==txt1_val){ 10 $(this).val(''); 11 } 12 }) 13 14 //邮箱地址输入框失去焦点 15 $(txt1).blur(function(){ 16 var txt1_value=$(txt1).val(); 17 if(txt1_value=="") 18 $(this).val(txt1_val);{ 19 } 20 }) 21 var $txt2_obj=$(txt2);//获取id为txt2的jquery对象 22 var $pswd_obj=$(password);//获取id为txt2的jquery对象 23 $txt2_obj.focus(function(){ 24 $pswd_obj.show().focus();//使密码输入框获取焦点 25 $txt2_obj.hide();//隐藏文本输入框 26 27 }) 28 $pswd_obj.blur(function(){ 29 if($pswd_obj.val()==''){//密码输入框失去焦点后,若输入框中没有输入字符时,则显现文本输入框 30 $txt2_obj.show(); 31 $pswd_obj.hide(); 32 } 33 34 }) 35 } 36 </script>
转载于:https://www.cnblogs.com/q460021417/p/4353554.html