jquery学习之1.19-小练习3-输入用户名密码时焦点触发和失去焦点

浏览数：24 / 时间：2015年06月09日

功能：进入页面，输入框用户名中默认填写的有用户名/手机/邮箱，当鼠标移动到上面时，默认值消失。鼠标移开时，如果没有填值，则继续显示用户名/手机/邮箱

页面效果：

代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6   <title>11</title>    
 7   <style type="text/css">
 8   body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
 9   </style>
10   <script type="text/javascript" src="../js/jquery-1.11.0.js">
11   </script>
12   <script language="javascript">
13    $(document).ready(function()
14   {      
15       //**********************左右移动*******
16      $("#bt1").click(
17      function()
18      {        
19          $("#bt1").focus(function(){
20           //进入焦点时触发
21           $curVal=$(this).val();
22           if($curVal==this.defaultValue)
23           {
24               $(this).val("");
25           }          
26          });
27       }); 
28       //失去焦点时触发
29       $("#bt1").blur(function(){
30        $curVal=$(this).val();
31       if($curVal=="")
32       {
33         alert(this.defaultValue);
34           $(this).val(this.defaultValue);          
35       }
36       });
37      
38    });
39   
40   </script>
41   </head> 
42   <body>
43     用户名<input type="text" id="bt1" value="用户邮箱/手机号/邮箱"></input>
44     密码<input type="password" id="bt2" value="密码"></input>
45     <input type="button" id="bt3" value="登陆"></input>
46   </body>
47 </html>