jquery實現文本框默認值功能
文本框是頁面中使用最爲頻繁的表單元素之一，熟練地做一個智能的文本框可不是你想象的那麼簡單，下面就讓源碼來告訴你如何寫好文本框的默認值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>XXX</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<scriptlanguage="JavaScript" src="js/jquery-1.3.1.js"></script>
<styletype="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background:#CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
</head>
<body>
<!--value默認值,通過this.defaultValue來訪問-->
<input type="text" value="用戶郵箱/手機號/用戶名" id="b1"/><br>
<inputtype="password" value="" id="b2"/><br>
<input type="button" value="登陸" id="b3"/><br>
</body>
<scriptlanguage="JavaScript">
$(document).ready(
function(){
//綁定獲得焦點focus()事件
$('#b1').focus(
function(){
//先獲取當前值
$curVal=$(this).val();
if($curVal==this.defaultValue){
//應當設置爲" "
$(this).val("");
}else{
$(this).val($curVal);
}
}
);
//再綁定一個失去焦點blur()事件
$('#b1').blur(
function(){
//先獲取當前值
$curVal=$(this).val();
if($curVal==""){
//應當設置爲" "
$(this).val(this.defaultValue);
}else{
$(this).val($curVal);
}
}
);
}
);
</script>
</html>