有的浏览器支持html5的水印placeholder（如Crome，firefox，ie10+)，有的不支持html5的placeholder（ie9，ie8，ie7....），对于不支持placeholder的属性也能使用placeholderAttr，于是写了这个简单的jquery插件，发出来与大家分享，实现代码逻辑在代码中都有注释，实现细节请直接参看代码。
/**
* jqueryPlug : 给不支持html5 placeholder水印功能的浏览器打补丁
*/ ;(function($){
'use strict';
///////////////////////////////////////////////////////// /*
* 扩展jquery实例方法
*/
$.fn.powerplaceholder = function(){ /*
* PlaceHolder 实例构造函数
* @param [DOM Instance] elm
*/
var PlaceHolder = function(elm){
this.$elm = $(elm);
this.$span = $("<span></span>").text(this.$elm.attr("placeholder")).css({
"position":"absolute",
"display":"inline-block",
"color":"#ccc",
"overflow":"hidden",
"padding-left":"2px",
"padding-top":"2px",
"left":this.$elm.offset().left,
"top":this.$elm.offset().top,
"font-size":this.$elm.css("font-size"),
"width":this.$elm.width()+2,
"height":this.$elm.height()+2
}).appendTo("body");
this.init();
} /**
* 静态方法：是否支持html5的placeholder
*/
PlaceHolder.isSupportHtml5 = function(){
var i = document.createElement('input');
return 'placeholder' in i;
} /**
* 实例方法：
*/
PlaceHolder.prototype = { /*
* 控制setInterval方法的实例，释放setInterval
*/
intervalInstance:null, /*
* @function 初始化
*/
init:function(){
this.showOrHide(); this.$elm.on("focus.PlaceHolder",$.proxy(this.focus,this))
.on("blur.PlaceHolder",$.proxy(this.blur,this)); this.$span.on("click.PlaceHolder",$.proxy(this.clickSpan,this));
}, /*
* 聚焦
*/
focus:function(){
var self = this; // 不要重复调用setInterval
if (self.intervalInstance) {
return;
} /*
* 应该所示插件的核心：每隔50s判断一下输入框是否有值，有值显示，无值隐藏；
* 权衡是否这里应该使用keydown来做这个事情，使用setInverval是不是太耗费资源了？？
*/
self.intervalInstance = setInterval(function(){
self.showOrHide();
},50);
}, /*
* 失焦
*/
blur:function(){ // clearInterval
clearInterval(this.intervalInstance);
this.intervalInstance = null; this.showOrHide();
}, /*
* 点击span时要触发输入框的focus事件
*/
clickSpan:function(){
this.$elm.trigger("focus.PlaceHolder");
}, /*
* 输入框有值显示placeholder，没有值隐藏placeholder
*/
showOrHide:function(){
if (this.$elm.val()) {
this.$span.hide();
}else{
this.$span.show();
}
}
}; /**
* 插件入口
* 支持html5的，采用原生态支持，不做任何处理；不支持html5 placeholder的采用插件实现模式支持
*/
if (!PlaceHolder.isSupportHtml5()) {
return this.each(function(){
new PlaceHolder(this);
});
}else{
return this;
};
}
})(jQuery);