<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN"
"
<html xmlns="
<head>
<meta httpequiv="ContentType" content="text/html; charset=utf" />
<title>無標題文檔</title>
<script src="
type="text/javascript">
</script>
<script type="text/javascript">
$(document)ready(function(){
$("#focus 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();
}
});
})
$("#keydown input_txt")each(function(){
var thisVal=$(this)val();
//判斷文本框的值是否為空有值的情況就隱藏提示語沒有值就顯示
if(thisVal!=""){
$(this)siblings("span")hide();
}else{
$(this)siblings("span")show();
}
$(this)keyup(function(){
var val=$(this)val();
$(this)siblings("span")hide();
})blur(function(){
var val=$(this)val();
if(val!=""){
$(this)siblings("span")hide();
}else{
$(this)siblings("span")show();
}
})
})
})
</script>
<style type="text/css">
form{width:px;margin:px auto;border:solid px #EDEDE;background:#FCFEF;
padding:px;boxshadow: px px rgba() inset;}
label{display:block;height:px;position:relative;margin:px ;}
span{position:absolute;float:left;lineheight:px;left:px;color:#BCBCBC;cursor:text;}
input_txt{width:px;border:solid px #ccc;boxshadow: px px rgba() inset;
height:px;textindent:px;}
input_txt:focus{boxshadow: px rgba();border:solid px #B;}
border_radius{borderradius:px;color:#B;}
h{fontfamily:"微軟雅黑";textshadow:px px px #fff;}
</style>
</head>
<body>
<form class="border_radius" id="focus">
<h>聚焦型提示語消失 無效果請刷新</h>
<label><span>花瓣注冊郵箱</span><input type="text" class="input_txt border_radius" />
</label>
<label><span>密碼</span><input type="text" class="input_txt border_radius" /></label>
</form>
<form class="border_radius" id="keydown">
<h>輸入型提示語消失</h>
<label><span>花瓣注冊郵箱</span><input type="text" class="input_txt border_radius" />
</label>
<label><span>密碼</span><input type="text" class="input_txt border_radius" /></label>
</form>
</body>
</html>
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20161.html
