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ì)您有幫助就好】元
