**昨天后台小哥提到了占位符无法显示的问题。在这里总结一下，写一篇小文分享给大家。.**================================================1.解决ie9以下输入无占位符问题。方案一：当浏览器不支持placeholder属性时，jquery会克隆一个与界面相同的输入框，将placeholder的值设置为它的值，覆盖输入框在界面上的位置，并隐藏界面上的输入并调用方法：$(#selector).placeholder();（selector一般是指css的id选择器）当文本框type=password时，引用这个placeholderscheme会使加密后的密码变成明文Password如果输入文本框使用bootstrap，行高会高一点。修改placeholder中的文字样式，可以在placeholder.js中的中添加一个style属性，如：如果是普通输入，不需要添加style属性，提取demo链接：https://pan.baidu.com/s/1AMl6...密码：zs9c方案二：js/jQuery实现思路：1.首先判断浏览器是否支持placeholder属性，如果不支持则使用模拟占位符2.创建一个label标签：label中的内容就是要添加的提示文字，文本要从对应的input|textarea标签中获取其placeholder属性值，然后在对应的input|textarea标签上覆盖label标签3.代码实现如下：(function(win){win.isPlaceholer=function(){varinput=document.createElement("input");return"placeholder"ininput;};win.placeholder=function(){if(!isPlaceholer()){varPlaceholder=function(obj){this.input=obj;varte=obj.getAttribute('占位符');this.label=document.createElement('label');this.label.innerHTML=te;this.label.id=obj.id+'标签';this.label.style.cssText='位置：绝对；文字缩进：4px；颜色：#999999；字体大小：14px;';if(obj.value!==''){this.label.style.display='none';}这个初始化（）；};Placeholder.prototype={getxy:function(obj){varleft,top;if(document.documentElement.getBoundingClientRect){varhtml=document.documentElement,body=document.body,pos=obj.getBoundingClientRect(),st=html.s滚动顶部||身体.scrollTop,sl=html.scrollLeft||body.scrollLeft，ct=html.clientTop||body.clientTop,cl=html.clientLeft||body.clientLeft;左=pos.left+sl-cl;top=pos.top+st-ct;}else{while(obj){left+=obj.offsetLeft;top+=obj.offsetTop;obj=obj.offsetParent;}}return{left:left,top:top};},getwh:function(obj){return{w:obj.offsetWidth,h:obj.offsetHeight};},setStyles:函数(obj,样式){for(varpinstyles){obj.style[p]=styles[p]+'px';}},init:function(){varlabel=this.label,input=this.input,getXY=this.getxy,xy=this.getxy(input),wh=this.getwh(input);this.setStyles(label,{'width':wh.w,'height':wh.h,'lineHeight':40,'left':xy.left+8,'top':xy.top});document.body.appendChild（标签）；label.onclick=function(){this.style.display="none";输入.焦点（）；};input.onfocus=function(){label.style.display="none";};input.onblur=function(){if(this.value===""){label.style.display="方块";}};if(window.attachEvent){window.attachEvent("onresize",function(){varxy=getXY(input);Placeholder.prototype.setStyles(label,{'left':xy.left+8,'top':xy.top});});}else{窗口。addEventListener("resize",function(){varxy=getXY(input);Placeholder.prototype.setStyles(label,{'left':xy.left+8,'top':xy.top});},false);}}};varinpColl=$("#Boxinput:visible");//这里是在页面上添加占位符支持的输入//varinpColl=document.getElementsByTagName('input'),vartextColl=document.getElementsByTagName('textarea');//这里是页面到添加对文本区域的占位符支持//varlableArr=$("#Boxlable");vartoArray=function(coll){for(vari=0,a=[],len=coll.length;i第二行
第三行">
