1

現在、自分の Web サイトにログイン ボックスがあります。パスワード ボックスにテキストを追加して、使用するパスワードをユーザーに伝えたいと考えています。すなわち。パスワード ボックスには単語 (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 Textbox を使用してこれを行う方法を知っている人はいますか。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>
4

1 に答える 1

2

プレースホルダー属性を試しましたか? したがって、ID="Password" の後に、placeholder="Enter Test Here" を挿入します。ただし、IE8以降では機能しません...これを試してください（jQueryを使用）

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

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

編集：上記のコメントを読んだ後、彼はポイントを持っています. このコードを使用すると、"Your Text Here" が判読不能になります。ただし、IE 8 以下でなくても、プレースホルダー属性は適切に表示されます。

于 2012-08-22T02:06:34.450 に答える