创建一个漂亮的input form标签

经常看到有些网站输入框或者搜索框有个底色文字，当你吧鼠标放上去的时候就没有了，离开就又有了，这个是怎么实现的呢？经过我的一番研究，终于知道他是如何实现的了使用 jquery控制实现的，代码如下

 1 $('input').focus(function() {
 2 
 3     if($(this).val() == "Enter your email here")
 4         $(this).val('');
 5 
 6 }).blur(function() {
 7 
 8     if($(this).val() == "")
 9         $(this).val('Enter your email here');
10 
11 });

不用我解释，相信你也能看到代码是什么意思

html代码如下

1 <form>
2     <label class="username-label" for="username">Username</label>
3     <input type="text" name="username" class="username">
4     <label class="password-label" for="password">Password</label>
5     <input type="password" name="password" class="password">
6 </form>

CSS代码如下

.username-label, .password-label {
    position: absolute;
    margin: 9px 9px 9px 12px;
}

javascript代码如下

 1 $('.username-label, .password-label').animate({ opacity: "0.4" })
 2     .click(function() {
 3         var thisFor    = $(this).attr('for');
 4         $('.'+thisFor).focus();
 5 });
 6 
 7 $('.username').focus(function() {
 8 
 9     $('.username-label').animate({ opacity: "0" }, "fast");
10 
11         if($(this).val() == "username")
12             $(this).val() == "";
13 
14     }).blur(function() {
15 
16         if($(this).val() == "") {
17             $(this).val() == "username";
18             $('.username-label').animate({ opacity: "0.4" }, "fast");
19         }
20     });
21 
22 $('.password').focus(function() {
23 
24     $('.password-label').animate({ opacity: "0" }, "fast");
25 
26         if($(this).val() == "password") {
27             $(this).val() == "";
28         }
29     }).blur(function() {
30 
31         if($(this).val() == "") {
32             $(this).val() == "password";
33             $('.password-label').animate({ opacity: "0.4" }, "fast");
34         }
35 });