先给大家看下这个效果:
未输入值 输入值后
以下是源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>登录提示框</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#TxtUserName").focus(function () { $(this).attr({ style: "border-color:#FFA91A;" }); if ($(this).val() == "用户名") $(this).attr("value", ""); $(this).attr({ style: "color:#653C31;" }); }); $("#TxtUserName").blur(function () { $(this).attr({ style: "border-color:#c1c1c1;" }); if ($(this).val() == "") { $(this).attr("value", "用户名"); } else { $(this).attr({ style: "color:#653C31;" }); } }); $("#TxtPassword").blur(function () { if ($(this).val() == "") { $(this).attr({ style: "display:none" }); $("#userpwd_a").attr({ style: "display:" }); $("#userpwd_a").attr("value", "密码"); } else { $(this).attr({ style: "border-color:#c1c1c1;color:#653C31;" }); } }); $("#userpwd_a").focus(function () { if ($("#TxtPassword").val() == "") { $(this).attr({ style: "display:none" }); $("#TxtPassword").attr({ style: "border-color:#FFA91A;display:" }); $("#TxtPassword").val(""); $("#TxtPassword").focus(); } else { $(this).attr({ style: "display:none" }); $("#TxtPassword").attr({ style: "border-color:#FFA91A;display:" }); $("#TxtPassword").focus(); } }); $("#TxtPassword").focus(function () { $(this).attr({ style: "border-color:#FFA91A;color:#653C31;" }); $(this).attr("value", ""); }); }); </script> <style type="text/css"> input{ color:red;} </style> </head> <body> <div class="outbox"> <ul class="login"> <li style="position:relative;"> <input class="username" type="text" value="用户名" maxlength="24" id="TxtUserName"/> </li> <li> <input type="text" id="userpwd_a" class="userpwd" value="密码" maxlength="24" /> <input class="userpwd" type="password" value="" maxlength="24" id="TxtPassword" style="display:none"/> </li> </ul> </div> </body> </html>
生成验证码在下篇文章中讲解: 生成验证码及判断是否匹配