HTML5的placeholder 属性的向下兼容
更多 0
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上。
- label标签覆盖到相应的input上
如上图，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 == “”){
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获得焦点，提示文案立即消失的效果，个人认为不需要多此一举，因为对用户而言用户不会频繁同时使用多了浏览器。