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
>
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
