placeholder的兼容性探索之路

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>placeholder</title>
    <style type="text/css">
    .label{position: relative; display: inline-block; *zoom:1; *display: inline; 
        *vertical-align: middle;}
    .label label{ position: absolute; left:0px; top:0; font-size: 12px;cursor: text; text-indent: 5px;}
    .label input{ padding: 9px 5px; height: 14px; line-height: normal; border: 1px solid #ccc; font-size: 14px;}
    </style>
</head>
<body>
请输入用户名：
<div class="label">
    <label for="user">请输入用户名</label>
    <input type="text" id="user" />
</div>
</body>
</html>
<script type="text/javascript">
var aLabel=document.getElementsByTagName("label")[0];
var aInput=document.getElementsByTagName("input")[0];
aLabel.style.lineHeight=aLabel.style.height=aInput.offsetHeight+"px";
if (aInput.value.length!=0){
    aLabel.style.display="none"
}else{
    aLabel.style.display="block"
};
aInput.onfocus=function(){
    aLabel.style.display="none";
}
aInput.onblur=function(){
    if (aInput.value.length!=0){
        aLabel.style.display="none"
    }else{
        aLabel.style.display="block";
    };
    
}
    
</script>

方法二

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>placeholder</title>
</head>
<body>
    <input type="text" placeholder="请输入用户名" />
</body>
</html>
<script>
function placeholder(opts){
if("placeholder" in document.createElement('input')){
    return;
    }else{
        this.obj=opts.obj;
        this.init();
        this.focus();
        this.blur();
    }
}
placeholder.prototype.init= function(){
    if (this.obj.getAttribute("placeholder") && this.obj.value.length==0){
        this.obj.value=this.obj.getAttribute("placeholder");
    }
};
placeholder.prototype.focus=function(){
    var _this=this;
    this.obj.onfocus=function(){
        if (_this.obj.value==_this.obj.getAttribute("placeholder")){
            _this.obj.value="";
        };
    }
};
placeholder.prototype.blur=function(){
    var _this=this;
    this.obj.onblur=function(){
        if (_this.obj.value.length==0){
            _this.obj.value=_this.obj.getAttribute("placeholder");
        };
    }
};
var aInput=document.getElementsByTagName("input")[0];
new placeholder({"obj":aInput});
</script>

方法三，

背景图片，限制太多，代码就不贴上来了