asp.net watermark on page load

Question

here I'm trying to get a watermark for my two textbox, supposedly they are Username and Password textbox. I already get the hang of it, using this code:

 <asp:TextBox ID="TbUsername" runat="server" CssClass="tb" Width="170px" onfocus="if(this.value=='Enter username'){this.value=''}"
                                onblur="if(this.value==''){this.value='Enter username'}"></asp:TextBox>

and

 <asp:TextBox ID="TbPassword" runat="server" CssClass="tb" TextMode="Password" Width="170px"
                                onfocus="if(this.value=='Enter password'){this.value=''}" onblur="if(this.value==''){this.value='Enter password'}"></asp:TextBox>

the problem is, I can get the watermark to pop-up only by clicking the textbox first, while I want them to show when the page first started. Is there anyway to do that? Thank you in advance for the help.

Answer 1

Use Html5's Property Placeholder for Whatemark

like as below

 <asp:TextBox ID="TbPassword" runat="server" CssClass="tb" TextMode="Password" Width="170px"
                                placeholder="Your Password"></asp:TextBox>

for use of this property you need not to use any external script or do any coding,just what you have do is to put placeholder attribute in textbox

Answer 2

You have to set a value when the page is loaded.

Try this

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            TbUsername.Text = "Enter username";
            TbPassword.Attributes.Add("value", "Enter Password");
        }
    }

/Update

Here is the Code for VB.NET

Protected Sub Page_Load(sender As Object, e As EventArgs)
    If Not IsPostBack Then
        TbUsername.Text = "Enter username"
        TbPassword.Attributes.Add("value", "Enter Password")
    End If
End Sub

Answer 3

At your .vb file's page load function:

If Not IsPostBack Then   
    Me.TbUsername.Text = "Enter username"
    Me.TbPassword.Attributes.Add("value", "Enter Password")
End If

This will set watermark for the first time the page load.

Another approach is use jquery and $(document).ready() function.

Answer 4

或者你可以使用ajax toolkit水印控件