암호 상자 텍스트

Question

현재 내 웹 사이트의 로그인 상자가 있습니다. 암호 상자에 텍스트를 추가하여 사용자에게 사용할 암호를 알려주고 싶습니다. 즉. 암호 상자에 단어 (Windows 로그온 암호를 사용하십시오)가 포함되어있을 것이며 단어를 클릭하면 암호가 사라지고 암호를 입력 할 수 있습니다.
나는 이런 식으로 뭔가를 사용하여 로그인 상자에이 작업을 수행 할 수 있습니다 :

<asp:TextBox ID="UserName" class="txtbox" runat="server" text="NUID" Width="240px" 
onfocus="if(this.value==this.defaultValue) {this.value='';$(this).css('color','black');}" 
onblur="if(this.value=='') {this.value=this.defaultValue;$(this).css('color','rgb(173,180,195)');}"></asp:TextBox> 

그러나, 작동하지 않는 암호로. 이것은 textmode = "password"매개 변수가 있기 때문인 것 같습니다.

암호 모드에서 ASP.NET 텍스트 상자를 사용하여이를 수행하는 방법을 알고있는 사람은 누구입니까? HTML textobx가 아닙니다.

다음은 현재 코드입니다.

HTML

<asp:Login ID="Login1" class="loginbox" runat="server" Font-Names="Verdana" Font-Size="8pt" 
     DisplayRememberMe="False" UserNameLabelText="NUID:" 
     FailureText="Incorrect login. Please try again." TitleText="" DestinationPageUrl="default.aspx" onauthenticate="Login1_Authenticate"> 
     <TextBoxStyle Width="110px" /> 
     <LoginButtonStyle Font-Names="Arial, Helvetica, sans-serif" Height="24px" /> 
             <LayoutTemplate> 
              <table border="0" cellpadding="1" cellspacing="0" 
               style="border-collapse:collapse; height:113px"> 
               <tr> 
                <td> 
                 <table border="0" cellpadding="0"> 
                  <tr> 
                   <td valign="baseline"> 
                   <div class="textlogin">NUID</div> 
                   </td> 
                  </tr>                
                  <tr> 
                   <td> 
                    <asp:TextBox ID="UserName" class="textloginbox" runat="server" Font-Bold="true"></asp:TextBox> 
                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" 
                     ControlToValidate="UserName" ErrorMessage="User Name is required." 
                     ToolTip="User Name is required." ValidationGroup="Login1" ForeColor="#FF0000" Font-Bold="true" Font-Size="14px">*</asp:RequiredFieldValidator> 
                   </td> 
                  </tr> 
                  <tr><td style="height:3px;"></td></tr> 
                  <tr> 
                   <td> 
                   <div class="textlogin">Password</div> 
                   </td> 
                  </tr> 
                  <tr> 
                   <td> 

                    <asp:TextBox ID="Password" runat="server" class="textloginbox" TextMode="Password" Font-Bold="true"></asp:TextBox> 
                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" 
                     ControlToValidate="Password" ErrorMessage="Password is required." 
                     ToolTip="Password is required." ValidationGroup="Login1" ForeColor="#FF0000" Font-Bold="true" Font-Size="14px">*</asp:RequiredFieldValidator> 
                   </td> 
                  </tr> 
                  <tr> 
                   <td align="center" style="color:#DA6426;"> 
                    <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> 
                   </td> 
                  </tr> 
                  <tr> 
                   <td align="right"> 
                   <asp:ImageButton ID="LoginButton" runat="server" CssClass="loginbutton" CommandName="Login" ValidationGroup="Login1" ImageUrl="~/Icons/Enter Arrow 30.png" /> 
                   &nbsp;&nbsp;  
                   </td> 
                  </tr> 
                 </table> 
                </td> 
               </tr> 
              </table> 
             </LayoutTemplate> 
            <TitleTextStyle BackColor="#FFFFE0" Font-Bold="True" 
             ForeColor="#FFFFFF" Height="0px"/> 
            </asp:Login> 

Answer 1

당신은 자리 표시 자 속성을 시도 해 봤나? 그래서 ID = "Password"뒤에 placeholder = "Enter Test Here"를 입력하십시오. 그것은

$("#Password").focus(function() 
{ 
    if($(this).val() == "Your Text Here") 
    { 
     $(this).val(""); 
    } 
}); 

$("#Password").blur(function() 
{ 
    if($(this).val() == "") 
    { 
     $(this).val("Your Text Here"); 
    } 
}); 

편집을 IE8을 위해 일을하고 있지만 아래로 ... (jQuery를 사용하여)이 시도하지 않을 것이다 : 위의 코멘트를 읽은 후, 그는이 (가) 있습니다. 이 코드를 사용하면 "Your Text Here"를 읽을 수 없습니다. 그러나 자리 표시 자 속성은 IE 8 이하가 아니더라도 올바르게 표시됩니다.