html 5 有个很棒的属性,placeholder,在鼠标聚焦到input输入框上面时候,提示文字会消失,失去焦点之后,又会出现:
但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性:
/*
* 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();
});
将上述JS引入页面中,inuput即可显示提示信息(兼容IE10以下)