IE下支持文本框和密码框placeholder效果的JQuery插件分享
很久之前写了这个插件，基于jQuery实现的，主要用于IE下实现placeholder效果，可同时支持文本和密码输入框。
placeholder是HTML5新增的一个属性，当input设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失。
下载地址：http://xiazai.jb51.net/201501/other/placeholderfriend.rar
实现代码如下：
(function($){
/**
*没有开花的树
*2012/11/2815:12
*/
varplaceholderfriend={ focus:function(s){ s=$(s).hide().prev().show().focus(); varidValue=s.attr("id"); if(idValue){ s.attr("id",idValue.replace("placeholderfriend","")); } varclsValue=s.attr("class"); if(clsValue){ s.attr("class",clsValue.replace("placeholderfriend","")); } } }
//判断是否支持placeholder functionisPlaceholer(){ varinput=document.createElement('input'); return"placeholder"ininput; } //不支持的代码 if(!isPlaceholer()){ $(function(){
varform=$(this);
//遍历所有文本框，添加placeholder模拟事件 varelements=form.find("input[type='text'][placeholder]"); elements.each(function(){ vars=$(this); varpValue=s.attr("placeholder"); varsValue=s.val(); if(pValue){ if(sValue==''){ s.val(pValue); } } });
elements.focus(function(){ vars=$(this); varpValue=s.attr("placeholder"); varsValue=s.val(); if(sValue&&pValue){ if(sValue==pValue){ s.val(''); } } });
elements.blur(function(){ vars=$(this); varpValue=s.attr("placeholder"); varsValue=s.val(); if(!sValue){ s.val(pValue); } });
//遍历所有密码框，添加placeholder模拟事件 varelementsPass=form.find("input[type='password'][placeholder]"); elementsPass.each(function(i){ vars=$(this); varpValue=s.attr("placeholder"); varsValue=s.val(); if(pValue){ if(sValue==''){ //DOM不支持type的修改，需要复制密码框属性，生成新的DOM varhtml=this.outerHTML||""; html=html.replace(/\s*type=(['"])?password\1/gi,"type=textplaceholderfriend") .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi,"") .replace(/\s*placeholderfriend/,"placeholderfriendvalue='"+pValue +"'"+"onfocus='placeholderfriendfocus(this);'"); varidValue=s.attr("id"); if(idValue){ s.attr("id",idValue+"placeholderfriend"); } varclsValue=s.attr("class"); if(clsValue){ s.attr("class",clsValue+"placeholderfriend"); } s.hide(); s.after(html); } } });
elementsPass.blur(function(){ vars=$(this); varsValue=s.val(); if(sValue==''){ varidValue=s.attr("id"); if(idValue){ s.attr("id",idValue+"placeholderfriend"); } varclsValue=s.attr("class"); if(clsValue){ s.attr("class",clsValue+"placeholderfriend"); } s.hide().next().show(); } });
}); } window.placeholderfriendfocus=placeholderfriend.focus; })(jQuery);