我們在登錄網站的時候，文本框中經常會有提示你輸入的信息，當你點擊文本框，提示信息自動消失，當文本框什麼都沒有，而且失去焦點的時候，又有了提示文字。
1.原型開發，先做一個簡單的：
我們首先需要一個html文件：
代碼 代碼如下:
<html>
<head>
<title>input test</title>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
//這裡放置css
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
//這裡放置jquery代碼
</script>
</head>
<body>
<form method="POST" id="user" action="">
User Name:<input type="text" name="username" value="Enter your name" /><br/>
PassWord:<input type="password" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>
下面加入jquery代碼：
我使用了click 和blur內置事件類型處理，而且，只是對username框有效（因為密碼框還有別的因素考慮）
代碼 代碼如下:
<html>
<head>
<title>input test</title>
<meta name="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").click(
function(){
if($(this).val()=="Enter your name"){
$(this).val("");
}
})
$("#username").blur(
function(){
if($(this).val()=="")
{
$(this).val("Enter your name");
}
})
});
</script>
</head>
<body>
<div id="content">
<form method="POST" id="user" action="">
User Name:<input type="text" id="username" name="username" value="Enter your name" /><br/>
PassWord:<input type="password" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>
2.做的更好
這樣基本的原型就寫成了，但是這個原型有許多的不足:
1.也許可以對密碼框也使用這種方式，但是密碼框的type類型是password,它不能顯示，何來提示文字？
2. if($(this).val()=="")這種寫法我可以接受，但是 if($(this).val()=="Enter your name"),你不覺得這很...要是我就想輸這個呢...
3.提示文字用別的灰色的粗體表示，這樣交互性是不是更強？
4.既然想要用兩種字體表示，能不能把他們提取出來？寫在.css裡？這個是可以重用的啊!
解決辦法:
1.密碼框先讓它的type是text的，等到點擊了，我們再設置成password
2.用個變量來表示是否要切換吧。
3.設置不同的css.
4.用attr("class","class1"),attr("class","class2")來切換class,而不是引用id.(也就是說用.不用#)
下面是實現:
代碼 代碼如下:
<html>
<head>
<title>input test</title>
<style type="text/css">
.default {
font-weight:bold;
color:#787878;
}
.puton{
font-weight:normal;
color:black;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var b=true;
$("#username").click(
function(){
if(b==true){
$(this).val("");
$(this).attr("class","puton");
b=false;
}
}
)
$("#username").blur(
function(){
if( $(this).val()==""){
$(this).val("Enter your name");
$(this).attr("class","default");
b=true;
}
}
)
});
$(document).ready(function(){
var b=true;
$("#password").click(
function(){
if(b==true){
$(this).val("");
$(this).attr("type","password");
$(this).attr("class","puton");
b=false;
}
})
$("#password").blur(
function(){
if( $(this).val()==""){
$(this).val("Enter your password");
$(this).attr("type","text");
$(this).attr("class","default");
b=true;
}
}
)
});
</script>
</head>
<body>
<div id="content">
<form method="POST" id="user" action="">
User Name:<input type="text" id="username" class="default" name="username" value="Enter your name" /><br/>
PassWord:<input type="text" id="password" class="default" name="password" value="Enter your password" />
<input type="submit" name="sub" value="login" />
</form>
</div>
</body>
</html>
3.更多:
把css寫到外部文件.
DRY原則!用插件來實現.
我在下一篇博客去實現.
author: aiqier