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
>
