经常看到有些网站输入框或者搜索框有个底色文字，当你吧鼠标放上去的时候就没有了，离开就又有了，这个是怎么实现的呢？经过我的一番研究，终于知道他是如何实现的了使用 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 });