<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
#groups label{display:block;height:40px;position:relative;margin:20px 0;}
#groups span{position:absolute;float:left;line-height:40px;left:10px;color:#BCBCBC;cursor:text;}
.input_txt{398px;border:solid 1px #ccc;box-shadow:0 1px 10px rgba(0,0,0,0.1) inset;height:38px;text-indent:10px;}
.input_txt:focus{box-shadow:0 0 4px rgba(255,153,164,0.8);border:solid 1px #B00000;}
</style>
</head>
<body>
<div id="groups">
<label><span>用户名</span><input type="text" class="input_txt" /></label>
<label><span>密码</span><input type="password" class="input_txt" /></label>
</div>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#groups .input_txt").each(function(){
var thisVal=$(this).val();
//判断文本框的值是否为空，有值的情况就隐藏提示语，没有值就显示
if(thisVal!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
//聚焦型输入框验证
$(this).focus(function(){
$(this).siblings("span").hide();
}).blur(function(){
var val=$(this).val();
if(val!=""){
$(this).siblings("span").hide();
}else{
$(this).siblings("span").show();
}
});
})
})
</script>
</body>
</html>