• 不断学习才有回报,学无止境!

让placeholder属性兼容所有浏览器

html研究 箭翎 765次浏览 0个评论 扫描二维码

placeholder由于是HTML5的新属性,因此直接使用会导致很多浏览器的不兼容,尤其是万恶的IE,虽然从IE10起开始支持,但是,使用IE6-IE9的人们依旧不在少数,如何使其兼容所有属性,最理想的办法就是通过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':wh.h, '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部分:

<input accesskey="s" maxlength="50" name="keyword" size="35" type="text" value="" placeholder="多关键词搜索,中间请加空格" />
<button type="submit">搜    索</button>

CSS部分最简单,就不写了自己在上面根据需要添加些样式就OK了
思想:
主要在JS部分,首先是对浏览器做判断,支持placeholder的浏览器则直接使用,不支持的就添加个label标签,主要是获取input和textarea,textarea的用的不多,html中就不写了,需要用时直接添加样式就OK了。


箭翎 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明让placeholder属性兼容所有浏览器
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址