js模仿html5 placeholder适应于不支持的浏览器

148 阅读 0 评论 98 点赞

我是靠谱客的博主专注灰狼，最近开发中收集的这篇文章主要介绍js模仿html5 placeholder适应于不支持的浏览器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

html5原生支持placeholder，对于不支持的浏览器（ie），可用js模拟实现。
js代码

复制代码代码如下:

 
(function(){ 
//判断是否支持placeholder 
function isPlaceholer(){ 
var input = document.createElement('input'); 
return "placeholder" in input; 
} 
//不支持的代码 
if(!isPlaceholer()){ 
//创建一个类 
function Placeholder(obj){ 
this.input = obj; 
this.label = document.createElement('label'); 
this.label.innerHTML = obj.getAttribute('placeholder'); 
this.label.style.cssText = 'position:absolute; text-indent:4px;color:#999999; font-size:12px;'; 
if(obj.value != ''){ 
this.label.style.display = 'none'; 
} 
this.init(); 
} 
Placeholder.prototype = { 
//取位置 
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 
} 
}, 
//取宽高 
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, 
xy = this.getxy(input), 
wh = this.getwh(input); 
this.setStyles(label, {'width':wh.w, 'height':wh.h, 'lineHeight':20, 'left':xy.left, '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"; 
} 
}; 
} 
} 
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++){ 
if (placeholderArr[i].getAttribute('placeholder')){ 
new Placeholder(placeholderArr[i]); 
} 
} 
} 
})() 

html代码：

复制代码代码如下:

 
<div> 
<input type="text" placeholder="提示1" /><br> 
<textarea placeholder="提示2" /></textarea><br> 
<input type="text" placeholder="提示3" /><br> 
</div> 

css代码：

复制代码代码如下:

 
div,input,textarea{ margin:0; padding:0;} 
div{width:400px; margin:100px auto 0;} 
input,textarea{width:200px;height:20px; margin-top:5px;line-height:20px;border:1px #666666 solid; background-color:#fff; padding-left:2px;} 
textarea{ height:60px; font-size:12px; resize:none;} 