CSS:
1 <style> 2 #txt1,#txt2 { color : #CCC ; border : 1px solid #666 ;} 3 #pswd { display : none ; border : 1px solid #666 ;} 4 </style>
引用JS庫(kù):
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 ="請(qǐng)輸入郵箱地址" /> 4 5 < br /> 6 < br /> 密碼: 7 < input type ="text" id ="txt2" value ="請(qǐng)輸入郵箱密碼" /> 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 ' , ' 請(qǐng)輸入郵箱地址 ' , ' #txt2 ' , ' #pswd ' ) // 調(diào)用 3 4 5 function dlsj (txt1,txt1_val,txt2,password) { 6 // 郵箱地址輸入框獲取焦點(diǎn) 7 $(txt1).focus( function (){ 8 var txt1_value = $(txt1).val(); 9 if (txt1_value == txt1_val){ 10 $( this ).val( '' ); 11 } 12 }) 13 14 // 郵箱地址輸入框失去焦點(diǎn) 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對(duì)象 22 var $pswd_obj = $(password); // 獲取id為txt2的jquery對(duì)象 23 $txt2_obj.focus( function (){ 24 $pswd_obj.show().focus(); // 使密碼輸入框獲取焦點(diǎn) 25 $txt2_obj.hide(); // 隱藏文本輸入框 26 27 }) 28 $pswd_obj.blur( function (){ 29 if ($pswd_obj.val() == '' ){ // 密碼輸入框失去焦點(diǎn)后,若輸入框中沒(méi)有輸入字符時(shí),則顯現(xiàn)文本輸入框 30 $txt2_obj.show(); 31 $pswd_obj.hide(); 32 } 33 34 }) 35 } 36 </ script >
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號(hào)聯(lián)系: 360901061
您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺(jué)我的文章對(duì)您有幫助,請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長(zhǎng)非常感激您!手機(jī)微信長(zhǎng)按不能支付解決辦法:請(qǐng)將微信支付二維碼保存到相冊(cè),切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
