How to use watermark property on password textbox in a web-page?

Here I am giving you an example where you can see that watermark property works fine with required field validator in Asp.Net. This whole process can be done by using simple jQuery tricks.

In my concept we have 2 textboxes and one of them is

<asp:TextBox ID="txtPassword" runat="server" Style="height: 18px; width: 250px; line-height: 18px; display: none;" MaxLength="50" TextMode="Password" CssClass="txt" />

and another textbox is

<asp:TextBox ID="txtPassword1" runat="server" Style="height: 18px; width: 250px; line-height: 18px;" MaxLength="50" TextMode="SingleLine" CssClass="txt" />

At the initial time of page load “txtPassword” taxtbox has “display;none” property.
and its hide and show will be maintained by jQuery function.

Example :
use this code in aspx page:

<asp:TextBox ID="txtPassword" runat="server" Style="height: 18px; width: 250px; line-height: 18px; display: none;" MaxLength="50" TextMode="Password" CssClass="txt" />
<asp:TextBox ID="txtPassword1" runat="server" Style="height: 18px; width: 250px; line-height: 18px;" MaxLength="50" TextMode="SingleLine" CssClass="txt" />
<asp:RequiredFieldValidator ControlToValidate="txtPassword" ID="RequiredFieldValidator3" runat="server" ErrorMessage="Enter password" Text="Enter password" Display="Dynamic" SetFocusOnError="true" ValidationGroup="valid" />
<asp:RequiredFieldValidator ControlToValidate="txtPassword1" ID="RequiredFieldValidator1" runat="server" ErrorMessage="" Text="" Display="Dynamic" InitialValue="Enter Password Here" SetFocusOnError="true" ValidationGroup="valid" />

javascript code at the end on the page:

<script type="text/javascript">
jQuery(document).ready(function () {
passtxtfnWaterMark('<%= txtPassword1.ClientID %>', '<%= txtPassword.ClientID %>', 'Enter Password Here');
});
</script>

and this jQuery function is use for watermark property:

function passtxtfnWaterMark(txtModeID, passModeID, WaterMarkText) {
jQuery("#" + txtModeID).addClass("water").val(WaterMarkText);
jQuery("#" + txtModeID).focus(function () {
jQuery("#" + passModeID).css('display', 'block');
jQuery("#" + passModeID).focus();
jQuery(this).css('display', 'none');
});
jQuery("#" + passModeID).blur(function () {
if (jQuery(this).val() == "") {
jQuery("#" + txtModeID).css('display', 'block');
jQuery(this).css('display', 'none');
jQuery("#" + txtModeID).val(WaterMarkText)
}
else {
jQuery("#" + txtModeID).val(WaterMarkText + ".")
}
});
jQuery("#" + passModeID).blur();
}

By implementing this example you can find a great watermark property in your site.

Tagged . Bookmark the permalink.

2 Responses to How to use watermark property on password textbox in a web-page?

  1. Talisha says:

    Nice and easy, does it all the time.

  2. Pattie Vorhies says:

    CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − = four

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">