淘宝商城文本输入框效果模仿
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"; } } }