HTML5的placeholder 属性的向下兼容

placeholder属性是HTML5新添加的属性，当input或者textarea设置了该属性后，该值的内容将作为灰色提示显示在文本框中，当文本框获得焦点时，提示文字消失，placeholder可作为输入框的提示文案，如图所示登录框：

其实以前是通过给input|textarea设置value值来实现类似功能的，当input|textarea获得焦点时，将其value设置为空。但是有一个问题是对于密码输入框：

<input type=”password”>

如 果再用设置value值的方法，密码输入框中的值将被黑点替代。使用placeholder则可以解决这个问题，目前支持placeholder的浏览器 为：Firefox4.0+、Chrome4.0+、Safari4.0+，Opera 11、IE9。对不支持的浏览器我们将使用模拟的placeholder属性的替代方法：

具体思路是：

1，首先判断浏览器是否支持placeholder属性，如果不支持则使用模拟placeholder

//判断是否支持placeholder属性

function isPlaceholer(){

var input = document.createElement(‘input’);

return “placeholder” in input;

}

2， 我们创建一个label标签：<label>密码</label> 标签里面的内容为所要添加的提示文案，该文案应该从对应的input|textarea标签取得其placeholder属性值，再将label标签遮盖 到所对应的input|textarea上。

如上图，IE8不支持placeholder属性，就为三个input添加placeholder的模拟，在body上分别添加label标签，分别对应“邮箱”、“密码”、“请输入验证码”三个输入框。将三个label分别定为到input输入框的位置。

3,添加事件，当label被点击或input|textarea获得焦点时将label的display设为none；

当input|textarea获得焦点时再将其显示。

具体实现代码如下：

if(!isPlaceholer()){ // 如果不支持placeholder属性

//创建一个类

function Placeholder(obj){

this.input = obj; // obj为添加了placeholder属性的input|textarea

this.label = document.createElement(‘label’); // 创建label标签

// label标签的innerHTML设为input|textarea 的placeholder属性值。

this.label.innerHTML = obj.getAttribute(‘placeholder’);

this.label.style.cssText = ‘position:absolute; text-indent:4px;color:#999999; font-size:14px;’;

if(obj.value != ”){

this.label.style.display = ‘none’;

};

this.init();

}

Placeholder.prototype = {

//获取input|textarea的位置，以便相应的label定位

getxy : function(obj){

var left, top;

if(document.documentElement.getBoundingClientRect){

var html = document.documentElement,

body = document.body,

pos = obj.getBoundingClientRect(),

st = html.scrollTop || body.scrollTop,

sl = html.scrollLeft || body.scrollLeft,

ct = html.clientTop || body.clientTop,

cl = html.clientLeft || body.clientLeft;

left = 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

}

},

//取input|textarea的宽高，将label设为相同的宽高

getwh : function(obj){

return {

w : obj.offsetWidth,

h : obj.offsetHeight

}

},

//添加宽高值方法

setStyles : function(obj,styles){

for(var p in styles){

obj.style[p] = styles[p]+’px’;

}

},

init : function(){

var label = 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);

label.onclick = function(){

this.style.display = “none”;

input.focus();

}

input.onfocus = function(){

label.style.display = “none”;

};

input.onblur = function(){

if(this.value =http://www.mamicode.com/= “”){

label.style.display = “block”;

}

};

if(window.attachEvent){

window.attachEvent(“onresize”,function(){// 因为label标签添加到body上，以body为绝对定位，所以当页面

var xy = getXY(input);

Placeholder.prototype.setStyles(label, {‘left’:xy.left+8, ‘top’:xy.top});

})}else{

window.addEventListener(“resize”,function(){

var xy = getXY(input);

Placeholder.prototype.setStyles(label, {‘left’:xy.left+8, ‘top’:xy.top});

},false);

}

}

}

var inpColl = document.getElementsByTagName(‘input’),

textColl = document.getElementsByTagName(‘textarea’);

//html集合转化为数组

function toArray(coll){

for(var i = 0, a = [], len = coll.length; i < len; i++){

a[i] = coll[i];

}

return a;

}

var inpArr = toArray(inpColl),

textArr = toArray(textColl),

placeholderArr = inpArr.concat(textArr);

for (var i = 0; i < placeholderArr.length; i++){ // 分别为其添加替代placeholder的label

if (placeholderArr[i].getAttribute(‘placeholder’)){

new Placeholder(placeholderArr[i]);

}

}

}

—————————————————————————————————————————

PS：

对于chrome浏览器，如果支持placeholder属性，placeholder的内容当input|textarea获得焦点时并不消失， 只有当有内容输入时才会消失，之前有人提议为了浏览器体验一致，即使chrome浏览器支持placeholder属性，也使用替换方法，来达到 input|textarea获得焦点，提示文案立即消失的效果，个人认为不需要多此一举，因为对用户而言用户不会频繁同时使用多了浏览器。

HTML5的placeholder 属性的向下兼容