登入提示框與密碼提示框，生成驗證碼

赤砂之蠍我愛羅發表於2012-09-25
密碼

先給大家看下這個效果：

未輸入值未輸入值    輸入值後輸入值後


以下是原始碼：

<!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>



生成驗證碼在下篇文章中講解：   生成驗證碼及判斷是否匹配


相關文章