用jquery實現輸入框擷取焦點消失文字

最後更新：2013-10-22 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我們在登入網站的時候，文字框中經常會有提示你輸入的資訊，當你點擊文字框，提示資訊自動消失，當文字框什麼都沒有，而且失去焦點的時候，又有了提示文字。

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

用jquery實現輸入框擷取焦點消失文字

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support