淘宝商城文本输入框效果模仿

html

<div id="div1">
    <label for="inputs">请输入内容</label>
    <input type="text" id="inputs" name="inputs">
</div>

css

*{font-size:14px;}
input,input:focus{outline:none}
label{cursor:pointer;position:absolute;z-index:1;float:left;height:25px;line-height:25px;padding-left:5px;}
#div1{position:relative;border:solid 1px #666;height:25px;width:160px;color:#333;}
#div1 input{position:absolute;z-index:2;border:none;background:none;height:25px;line-height:25px;padding-left:5px;font-size:14px;}

JavaScript

/*$(function(){
    $("#inputs").focus(function(){
        $("label").css("color","#999");
    });
    $("#inputs").keypress(function(){
        $("label").hide();
    });
    $("#inputs").blur(function(){
        var i=$(this).val();
        if(i=="" || i==null || i=="请输入内容"){
            $("label").show().css("color","#333");
        }
    });
});*/
window.onload=function(){
    var label=document.getElementById("div1").getElementsByTagName("label")[0];
    var input=document.getElementById("inputs");
    input.onfocus=function(){
        label.style.color="#999999";
    }
    input.onkeypress=function(){
        label.style.display="none";
    }
    input.onblur=function(){
        var values=input.value;
        if(values=="" || values==null || values=="请输入内容"){
            input.value=="请输入内容";
            label.style.color="#333";
            label.style.display="block";
        }
    }
}