原文:https://www.oschina.net/code/snippet_206691_26471#44160
让支持的直接路过,不支持的,完美显示~~
/*
* jQuery placeholder, fix for IE6,7,8,9
* @author JENA
* @since 20131115.1504
* @website ishere.cn
*/
var
JPlaceHolder = {
//检测
_check :
function
(){
return
'placeholder'
in
document.createElement(
'input'
);
},
//初始化
init :
function
(){
if
(!
this
._check()){
this
.fix();
}
},
//修复
fix :
function
(){
jQuery(
':input[placeholder]'
).each(
function
(index, element) {
var
self = $(
this
), txt = self.attr(
'placeholder'
);
self.wrap($(
'<div></div>'
).css({position:
'relative'
, zoom:
'1'
, border:
'none'
, background:
'none'
, padding:
'none'
, margin:
'none'
}));
var
pos = self.position(), h = self.outerHeight(
true
), paddingleft = self.css(
'padding-left'
);
var
holder = $(
'<span></span>'
).text(txt).css({position:
'absolute'
, left:pos.left, top:pos.top, height:h, lienHeight:h, paddingLeft:paddingleft, color:
'#aaa'
}).appendTo(self.parent());
self.focusin(
function
(e) {
holder.hide();
}).focusout(
function
(e) {
if
(!self.val()){
holder.show();
}
});
holder.click(
function
(e) {
holder.hide();
self.focus();
});
});
}
};
//执行
jQuery(
function
(){
JPlaceHolder.init();
});
<!
doctype
html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery JPlaceholder Demo</
title
>
<
script
src
=
"jquery-1.8.3.min.js"
></
script
>
<
script
src
=
"jquery.JPlaceholder.js"
></
script
>
</
head
>
<
body
>
<
form
>
<
div
>
<
ul
>
<
li
>
<
input
type
=
"text"
name
=
"username"
placeholder
=
"用户名"
>
</
li
>
<
li
>
<
input
type
=
"password"
name
=
"username"
placeholder
=
"密码"
>
</
li
>
<
li
>
<
button
type
=
"button"
>登录</
button
>
</
li
>
</
ul
>
</
div
>
</
form
>
</
body
>
</
html
>