ajax textbox watermark

我開發了一個頁面，我需要輸入電子郵件和密碼，並且在輸入之前應該在一個文本框中顯示「輸入您的電子郵件」文本並在另一個文本框中顯示「輸入您的密碼」文本。ajax textbox watermark

以下是執行上述操作的代碼。

<html> 
<head> 
<title>lksdjflk</title> 
<style> 
    .unwatermarked { 
     height:18px; 
     width:148px; 
} 

    .watermarked { 
     height:20px; 
     width:150px; 
     padding:2px 0 0 2px; 
     border:1px solid #BEBEBE; 
     background-color:#F0F8FF; 
     color:Gray; 
} 
</style> 
</head> 
</html> 

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarked"></asp:TextBox> 
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
    Enabled="true" TargetControlID="TextBox1" WatermarkCssClass="watermarked"  
    WatermarkText="email-Id"> 
</asp:TextBoxWatermarkExtender> 
</asp:Content>

如果有人知道的任何解決方案，請讓我儘快儘可能知道。

感謝， Avnish

來源

2013-04-02 puneetverma0711

如果你可以使用HTML5，你可以採取的['placeholder']利潤（HTTP ：//davidwalsh.name/html5-placeholder）屬性。 –

@XaviLópez - 從[規範]（http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute）：*佔位符屬性不應該用作標籤的替代品。 * – Quentin

可能重複的[如何設置標籤內的文本字段用戶名和密碼？]（http://stackoverflow.com/questions/2536491/how-to-set-labels-inside-textfields-for-username-and-password ） – Quentin

試試這一個。

<asp:TextBox ID="passwordId" runat="server" 
    placeholder="Please enter UserName"></asp:TextBox> 

<asp:TextBox ID="usernameId" runat="server" 
    placeholder="Please enter password"></asp:TextBox>

來源

2013-04-02 11:44:14 Ranjith

從[規範]（http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute）：*佔位符屬性不應該用作標籤的替代品* – Quentin

@昆汀：請閱讀他的問題。 – Ranjith

他正在尋求特定的視覺效果。有很多種方法可以實現它，其中一些方法不違反HTML規範，因此不易實現。 – Quentin

您可以使用佔位符爲此，不受警戒所有的瀏覽器（早期的瀏覽器）將支持它，但它在最常用的瀏覽器上運行。 Visual Studio也會將其報告爲代碼中的錯誤lol。

<asp:TextBox ID="TextBox1" runat="server" Placeholder="enter some text here" CssClass="unwatermarked"></asp:TextBox>

你也可以輸入文本作爲一個實際的值，則使用jQuery選擇它的所有焦點

<asp:TextBox ID="TextBox1" runat="server" value="enter some text here" CssClass="unwatermarked"></asp:TextBox> 

$("#TextBox1").on("click",function() { 
    $(this).select(); 
});

來源

2013-04-02 11:45:24

從[規範]（http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute）：* placeholder屬性不應該用作標籤的替代品。* – Quentin

閱讀實際的答案....有時我想知道爲什麼我浪費我的時間在這裏有很多人點擊沒有閱讀。 –

我已閱讀實際答案。它使用placeholder屬性作爲標籤。第二個版本使用值屬性作爲可能更糟的一個。 – Quentin

爲了使用AjaxControlToolkit首先需要在web.config中或在註冊組件個人頁面。對於你的情況下添加

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="act" %>

到你的頁面的頂部下方Page指令，並使用TextBoxWatermarkExtender爲：

<asp:TextBox ID="TextBox1" runat="server" CssClass="unwatermarked"></asp:TextBox> 
     <act:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
      Enabled="true" TargetControlID="TextBox1" WatermarkCssClass="watermarked" WatermarkText="Enter your email id"> 
     </act:TextBoxWatermarkExtender> 
     <br /> 
     <br /> 
     <asp:TextBox ID="TextBox2" runat="server" CssClass="unwatermarked"></asp:TextBox> 
     <act:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" 
      Enabled="true" TargetControlID="TextBox2" WatermarkCssClass="watermarked" WatermarkText="Enter your password"> 
     </act:TextBoxWatermarkExtender>

來源

2013-04-02 11:53:42

這段代碼運行不正常請給點意見 – puneetverma0711

有什麼問題？ –

此代碼取自一個工作頁面... –

ajax textbox watermark

回答

相關問題