Thursday, March 21, 2013

TextboxWatermarkExtender and Textbox with TextMode = Password


I managed to do this by setting the watermark stylesheet to overlay an image in the textbox.
You simply take a snapshot of how you want the watermarked textbox to look, save that, then set the watermark css of that textbox to a style that displays the image and aligns the text to the right (because otherwise it will still be visible)
It's very easy and works flawlessly.
The Textbox:
<asp:TextBox ID="Password" runat="server" CssClass="txtbox_login" Width="120px" TextMode="Password">

The Watermark (Set the WatermarkText property to anything you want, but just one character):
<ajax:TextBoxWatermarkExtender ID="txtWMark2" runat="server" WatermarkCssClass="watermarked_psw"TargetControlID="Password" WatermarkText="*" />

The StyleSheet (You MUST align the text to the right, otherwise it will still display over the image):
.watermarked_psw
{
colorWhite;
font-familyTahoma;
font-size11px;
bordersolid 1px #a9a9a9;
text-indent:2px;
vertical-align:middle;
text-align:right;
background-image:url(../images/psw_wMark.png);
background-repeat:no-repeat;
}

I found this one here, by JeanT
It works !

No comments: