码迷,mamicode.com
首页 > 其他好文 > 详细

晚上学习———登录框 有用户名和密码输入框默认字问题

时间:2015-11-26 00:58:43      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>标准化页面格式</title>
 6     <style type="text/css">
 7         #login{
 8             width:300px;
 9             height: 250px;
10             background: gray;
11             margin: 0 auto;
12             padding-top: 30px;
13             font-size: 16px;
14             text-align: center;
15         }
16         #username,#password{
17             width:150px;
18             height: 20px;
19         }
20         #Login,#rset{
21             width:90px;
22             height: 40px;
23             margin-left: 20px;
24         }
25         a{
26             float: right;
27         }
28     </style>
29     <link rel="stylesheet" type="text/css" href="">
30 </head>
31 <body>
32     <form id="login" action="#" method="get">
33         username:<input type="text" value="请输入账号" id="username"><br /><br />
34         password:<input type="password" value="88888888" id="password"><br /><br />
35                 <input type="submit" value="登录"    id="Login" />
36                 <input type="reset" value="重置" id="rset" /><br /><br />
37                 <a href="#">忘记密码</a>
38     </form>
39     <script src="js/jquery.js"></script>
40     <script>
41         $(document).ready(function(){
42             $("#username").focusin(function(){
43                 $("#username").val("")
44             })
45             .focusout(function(){
46                 if($("#username").val()=="")
47                     {
48                         $("#username").val("请输入账号");
49                     }
50             })
51         })
52     </script>
53 </body>
54 </html>

样式有点丑,基本功能实现了

晚上学习———登录框 有用户名和密码输入框默认字问题

标签:

原文地址:http://www.cnblogs.com/webzhang/p/4996270.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!