<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仿淘宝搜索框</title>
<style type="text/css">
div{
position: relative;
}
lable{
position: absolute;
left: 20px;
top: 2px;
color: #CCCCCC;
display: block;
}
</style>
<script type="text/javascript">
window.onload = function (){
function $(id){return document.getElementById(id);}
$("txt").oninput = $("txt").onpropertychange = function(){
if(this.value == ''){
$("message").style.display = "block";
}else{
$("message").style.display = "none";
}
}
}
</script>
</head>
<body>
<div>
<input type="" name="" id="txt" value="" />
<lable for="txt" id="message">aaa</lable>
</div>
</body>
</html>
鼠标放上去:
鼠标输入时:
回删后: