标签：
placeholder在低版本浏览器上是不兼容的，包括ie6-9，甚至部分的手机浏览器也是不支持的。所以就出现了很多的兼容实现。我自己做了一个利用label模拟实现的代码，贴出来分享一下，欢迎拍砖。上代码。。。。
(function(_WIN){ var PLACE = ‘placeholder‘, inputs = document.getElementsByTagName(‘input‘), body = document.getElementsByTagName(‘body‘)[0], domArr = []; //获取属性值 function getStyle(element,attr){ var result = null; if(element.currentStyle){ result = element.currentStyle[attr]; } // else if(window.getComputedStyle) { // result = window.getComputedStyle(element,null)[attr]; // } return result; } //设置属性 function setStyle(tar,param){ var val; if(Object.prototype.toString.call(param) === ‘[object Object]‘) { for(i in param){ val = param[i]; tar.style[i] = val; } } } //获取元素的绝对位置 function getElementAbsPos(e) { var offsetTop = e.offsetTop, offsetLeft = e.offsetLeft; while(e = e.offsetParent) { offsetTop += e.offsetTop; offsetLeft += e.offsetLeft; } return {left:offsetLeft,top:offsetTop}; } //设置label function setLabel(tar,labelDom){ var hei = getStyle(tar,‘height‘) || 0, wid = getStyle(tar,‘width‘) || 0, paddingLeft = getStyle(tar,‘padding-left‘) || 0 scrollHeight = document.body.scrollHeight, currentHei = parseFloat(getStyle(tar.parentNode,‘height‘)), tarPosition = getElementAbsPos(tar); setStyle(labelDom,{‘height‘:hei, ‘width‘:wid, ‘paddingLeft‘:paddingLeft, ‘display‘:‘block‘, ‘position‘:‘absolute‘, ‘lineHeight‘:hei, ‘top‘:tarPosition.top + ‘px‘, ‘left‘:tarPosition.left + ‘px‘, ‘fontSize‘:‘14px‘, ‘color‘:‘#999‘}); } //获取元素的属性 function getAttr(target,property){ var value = target.getAttribute(property); return value; } //绑定事件的公共方法 function bindDomEvent(obj, evtType, handler) { var oldHandler; // if (obj.addEventListener) { // obj.addEventListener(evtType, handler, false); // } else { evtType = evtType.toLowerCase(); if (obj.attachEvent) { obj.attachEvent(‘on‘ + evtType, handler); } else { oldHandler = obj[‘on‘ + evtType]; obj[‘on‘ + evtType] = function () { if (oldHandler) { oldHandler.apply(this, arguments); } return handler.apply(this, arguments); }; } //} } //label的点击事件 function clickFn(that,labelDom){ bindDomEvent(labelDom,‘click‘,function(){ setStyle(labelDom,{‘color‘:‘#ccc‘}); //兼容ie7 that.focus(); }); } //input的键盘事件 function keydownFn(that,labelDom){ bindDomEvent(that,‘keydown‘,function(){ setStyle(labelDom,{‘color‘:‘#999‘, ‘display‘:‘none‘}); }); } //input的焦点事件 function blurFn(that,labelDom){ var result = null; bindDomEvent(that,‘blur‘,function(){ if(that.value){ result = ‘none‘; }else { result = ‘block‘; } setStyle(labelDom,{‘color‘:‘#999‘,‘display‘:result}); }); } //入口执行 if(!(PLACE in document.createElement(‘input‘))){ body.style.position = ‘relative‘; for(var z = 0, len = inputs.length; z < len; z++){ var that = inputs[z]; if(getAttr(that,‘data-placeholder‘)){ var placeholderVal = getAttr(that,‘data-placeholder‘), val = getAttr(that,PLACE) || ‘‘; if(placeholderVal){ var labelDom = document.createElement(‘label‘), id = getAttr(that,‘id‘); labelDom.className = ‘label‘ + z; labelDom.setAttribute(‘for‘,id); labelDom.innerHTML = val; body.appendChild(labelDom); //调用设置label setLabel(that,labelDom); //绑定事件 clickFn(that,labelDom); keydownFn(that,labelDom); blurFn(that,labelDom); } } } } })(window);
这个方式可以兼容所有的浏览器，但是相应的会牺牲速度。
so提供另一种方式，利用事件。思路如下：
1.判断是否支持placeholder，如果支持的话，使用原生的;如果不支持的话，读取placeholder的值放入value里面，修改value的颜色。
2.当获取焦点的时候改变value颜色。
3.keydown的时候清除这个value，显示用户输入的，改变value的颜色。
4.失去焦点的时候判断输入是否有值，如果没有的话再把原来的placeholder的文字放回去。
注：这种方式如果type=password的话，就会显示。。。但是相比上面的方式，速度有提升。最主要的是，这种方式在绑定事件的时候要慎重。（如果input上面本来就有blur等事件，如果代码不是一个人独立管理等等）
标签：
原文地址：http://www.cnblogs.com/xizai/p/4302935.html
