让ie支持placeholder

　　在项目中，input 和 textarea标签要用到提示，当初是用value来模拟的，虽然可以达到这个效果，但是每一个还绑定了onblur和onfocus事件，这样一来 提交数据的时候验证就是个麻烦事了，input text还好一些，失去焦点是就可以用defaultvalue来搞，textarea就麻烦了，没有defaultvalue这个属性。

　　没有defaultvalue都是小事，我们项目用到了jquery.validationEngine验证框架，如果用框架来验证的话，那么就不能用value来模拟提示了，所以 干脆就找一个网上的placeholder插件来实现提示，搞到项目中，可以了，运行一看，虽然可以用，但是还是达不到我们想要的效果（兼容效果：只要一获得焦点，提示就消失），Firefox默认是onInput才消失，我就想改改那个插件的代码，尼玛，看不懂啊，Google... 看到了一篇关于开发jQuery插件的博文，受益匪浅啊，在此推荐给还不会的童鞋，地址是：http://javascript.ruanyifeng.com/jquery/plugin.html，这篇博文虽然短小，但是精悍啊，做到了授人以鱼不如授人以渔，通俗易懂，非常感谢。

　　前面的大多是屁话，不过那篇博文看看还是对我们这些小菜鸟开发jQuery插件还是很有用的，不多说了，ie支持的placeholder插件代码如下：

　　

/** 
 * 兼容placeholder,如果判断是没有能力实现placeholder的浏览器，则默认用span标签来模拟提示
 * 用法：在标签上写上placeholder属性，如果标签是textarea的话，那么就需要在写一个属性maxwidth（提示最短长度）
 * 作者：cjw
 * 时间：2014年9月27日15:44:38
 * */
;$(function ($){
	$.fn.placeholder = function (optons){
		var settings = $.extend({
			placeholderColorToOther:"#444", // Firefox 提示文字颜色
			placeholderColorToIe:"#9a9a9a", // ie 提示文字颜色
			onInputHide:false // 采用支持placeholder浏览器的placeholder效果，当开始输入的时候，才隐藏提示，默认为false
		},optons);
		
		return this.each(function (i,obj){
			var isCan = "placeholder" in document.createElement("input");
			if (isCan){ // 可以
				// 一加载的颜色
				if ($(obj).val() == ""){
					$(obj).css("color",settings.placeholderColorToOther);
				}else {
					$(obj).css("color","#000"); // 黑色
				}
				
				if　(!settings.onInputHide){
					var tempPlaceholder = "";
					$(obj).focus(function (){
						tempPlaceholder = $(obj).attr("placeholder");
						$(this).css("color","#000").attr("placeholder","");
					}).blur(function (){
						if ($(obj).val() == ""){
							$(this).css("color",settings.placeholderColorToOther).attr("placeholder",tempPlaceholder);
						}
					});
				}
			}else { // 不可以 则用模拟span来实现
				setSpan(obj);
			}
			
		});
			
		// 模拟span标签
		function setSpan(obj){
			var placeholderStr  = $(obj).attr("placeholder");
			// span 标签的样式及参数
			var textAlign = $(obj).css("text-align");
			var display = "inline-block";
			if ($(obj).val() != ""){
				display = "none";
			}
			var width = $(obj).width();
			if (obj.tagName == "TEXTAREA"){
				width = $(obj).attr("maxwidth");
			}
			var height = $(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight();
			var tempSpan = $('<span class="wrap-placeholder" style="position:absolute;text-align:'+textAlign+';display:'+display+'; overflow:hidden;color:'+settings.placeholderColorToIe+';width:'+width+'px; height:'+height+'px;">'+placeholderStr+'</span>');
			tempSpan.css({
				"margin-left":$(obj).css("margin-left"),
                "margin-top":$(obj).css("margin-top"),
                "font-size":$(obj).css("font-size"),
                "font-family":$(obj).css("font-family"),
                "font-weight":$(obj).css("font-weight"),
                "padding-left":parseInt($(obj).css("padding-left")) + 2 + "px",
                "line-height":$(obj)[0].tagName == "TEXTAREA" ? $(obj).css("line-weight") : $(obj).outerHeight() + "px",
                "padding-top":$(obj)[0].tagName == "TEXTAREA" ? parseInt($(obj).css("padding-top")) + 2 : 0,
                "min-width":$(obj).css("min-width")
			});
			
			$(obj).before(tempSpan.click(function (){
				// 判断是否执行相应的操作，如果obj是不可用的，则不执行
				if ($(obj).is(":enabled")){
					$(obj).trigger("focus");
				}
				
			}));
			if (settings.onInputHide){
				
				$(obj).on("input",function (){
					tempSpan.hide();
				}).blur(function (){
					if ($(obj).val() == ""){
						tempSpan.show();
					}
					
				});
			}else {
				
				$(obj).focus(function (){
					tempSpan.hide();
					
				}).blur(function (){
					if ($(obj).val() == ""){
						tempSpan.show();
					}
				});
			}
		}
		
	}
	
}(jQuery));


// 启用placeholder
$(function (){
	$("[placeholder]").placeholder();
	
});

　　代码很简单，如果不会jQuery插件开发的，理解起来还是有点吃力的，当我第一次看到这种写法的时候，参数不是很理解