<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -150px; width:300px;height:300px;background:#eee;">
<div style="position: relative; width: 173px; ">
<label for="" id="ipt" style="position: absolute;left: 5px;top: 0;color: #999; ">请输入用户名</label>
<input type="text" id="uname" name="uname" style="z-index: 1;" onFocus="hide()" onBlur="show()"/>
</div>
</div>
<script type="text/javascript">
function hide() {
var ipt=document.getElementById("ipt");
ipt.style.display="none";
}
function show() {
var ipt=document.getElementById("ipt");
var name=document.getElementById("uname");
if(name.value.length>0){
ipt.style.display="none";
}
else{
ipt.style.display="block";
}
}
</script>
</body>
</html>