最近写页面的时候发现输入框上面的提示文字很常用,但是蛋疼的ie6/7/8又不支持placeholder属性,每次都得用span飘在上面,还得写js配合,所以写了这样一个小插件,又能偷懒了。作用很简单:让不支持placeholder属性的浏览器也可以直接在表单控件中写placeholder属性。代码如下:
(function ($) {
$.fn.extend({
placeholder : function(opt){
if("placeholder" in document.createElement_x("input")) return false;
var eles = $(this);
eles.each(function(i,v){
e = $(v);
if(!e.attr('placeholder')) return true;
var options = {
focusHide : false,
color : "#999",
focusColor : "#999",
left : "5px"
}
for (name in opt) {
if (opt.hasOwnProperty(name)) {
options[name] = opt[name];
}
}
var top = (e.height() - 6)/2 + "px";
var span = document.createElement_x('span');
e.parent().css('position','relative').append(span);
span = $(span);
span.html(e.attr('placeholder'));
span.css({
position : 'absolute',
left : options.left,
top : top,
color : options.color
});
e.focus(function(){
if(options.focusHide){
span.hide();
}else{
span.css('color',options.focusColor);
}
}).blur(function() {
if(e.val() == ''){
span.show();
span.css('color',options.color);
}
});
e.on('input',function(){ //bug:IE9无法捕捉到退格键
if(e.val() == ''){
span.show();
}else{
span.hide();
}
});
e.on('propertychange',function(event){
if(e.val() == ''){
span.show();
}else{
span.hide();
}
});
span.click(function(){
e.focus();
});
});
}
});
})(jQuery);