html不支持js,js模仿html5 placeholder适应于不支持的浏览器_javascript技巧

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

= styles

+'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代码：

复制代码 代码如下:

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;}