placeholder 属性
定义和用法
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
解决兼容性问题方法1：
$(function(){
handlePlaceholderForIE();
});
function handlePlaceholderForIE() {
// placeholder attribute for ie7 & ie8
if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 9) {
// ie7&ie8
jQuery('input[placeholder], textarea[placeholder]').each(function () {
var input = jQuery(this);
jQuery(input).val(input.attr('placeholder'));
jQuery(input).focus(function () {
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
jQuery(input).blur(function () {
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.val(input.attr('placeholder'));
}
});
});
}
}
方法二：
HTML：
<input type="text" id="uname" name="uname" placeholder="请输入用户名"/>
CSS：
.phcolor{ color:#999;}
JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
$(
function
(){
//判断浏览器是否支持placeholder属性
supportPlaceholder=
'placeholder'
in
document.createElement(
'input'
),
placeholder=
function
(input){
var
text = input.attr(
'placeholder'
),
defaultValue = input.defaultValue;
if
(!defaultValue){
input.val(text).addClass(
"phcolor"
);
}
input.focus(
function
(){
if
(input.val() == text){
$(
this
).val(
""
);
}
});
input.blur(
function
(){
if
(input.val() ==
""
){
$(
this
).val(text).addClass(
"phcolor"
);
}
});
//输入的字符不为灰色
input.keydown(
function
(){
$(
this
).removeClass(
"phcolor"
);
});
};
//当浏览器不支持placeholder属性时，调用placeholder函数
if
(!supportPlaceholder){
$(
'input'
).each(
function
(){
text = $(
this
).attr(
"placeholder"
);
if
($(
this
).attr(
"type"
) ==
"text"
){
placeholder($(
this
));
}
});
}
});
|
此方法的思路是做一张含有提示文字的图片作为input输入框的背景图，初始时获得焦点同时加载背景图；
背景图如下：
当输入框不为空时，去掉背景图；
当输入框为空时，加载背景图；
当用户键盘按键且输入框不为空( 输入字符 )时，去掉背景图；
当用户键盘按键且输入框为空( 删除字符 )时，加载背景图。
此方法的缺点是：需要为每一个提示文字不同的input制作背景图片，并且设置input的样式。
HTML代码不变。
CSS：
.phbg{ background:url(img/bg.jpg) 0 0 no-repeat;}
JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
$(
function
(){
//判断浏览器是否支持placeholder属性
supportPlaceholder=
'placeholder'
in
document.createElement(
'input'
);
if
(!supportPlaceholder){
//初始状态添加背景图片
$(
"#uname"
).attr(
"class"
,
"phbg"
);
//初始状态获得焦点
$(
"#uname"
).focus;
function
destyle(){
if
($(
"#uname"
).val() !=
""
){
$(
"#uname"
).removeClass(
"phbg"
);
}
else
{
$(
"#uname"
).attr(
"class"
,
"phbg"
);
}
}
//当输入框为空时，添加背景图片；有值时去掉背景图片
destyle();
$(
"#uname"
).keyup(
function
(){
//当输入框有按键输入同时输入框不为空时，去掉背景图片；有按键输入同时为空时（删除字符），添加背景图片
destyle();
});
$(
"#uname"
).keydown(
function
(){
//keydown事件可以在按键按下的第一时间去掉背景图片
$(
"#uname"
).removeClass(
"phbg"
);
});
}
});
|