js+css模拟Placeholde

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>placeholder</title>
<style>
.box{position:relative;height: 30px;overflow: hidden;}
.box input{position: absolute;top: 0;left: 0px;z-index:2;width: 220px;height: 30px;background: none;border:solid 1px #ddd;}
.box span{position: absolute;top: 0;left: 0px;z-index:0;width: 120px;height: 30px;padding-left:3px;line-height: 30px;color: #eee;}
</style>
</head>
<body>
<div class="box">
<input type="search" id="inputPlaceholde" name="user_search" />
<span>placeholder</span>
</div>
</html>
<script type="text/javascript">
var inputPlaceholde = document.getElementById("inputPlaceholde");
inputPlaceholde.onkeydown = function(){
this.style.background = "#fff";
}
inputPlaceholde.onkeyup = function(){
if(this.value == ""){
this.style.background = "none";
}
}
</script>

posted @ 2014-06-17 15:05  mecy  阅读(211)  评论(0)  编辑  收藏  举报