jquery WaterMark Textbox blink on postback
I want to use WaterMark for some of my textboxes on my input form. The issue is I have an auto postback dropdownlist as well and this causes my textbox watermark text to blink on postback.
Below is the sample version of the scenario:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="开发者_JS百科scripts/jquery.watermark.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtEmail").watermark("Email Address");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtEmail" ErrorMessage="Email Invalid"></asp:RequiredFieldValidator>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem Text="One" />
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
</body>
The reason for this behavior is because jquery watermark is client-side.
One workaround I found is here. The issue with that is I have to use WaterMarkTextBoxExtender of AjaxControlToolkit which I would like to avoid if possible.
Edited: I was wrong. The workaround above I pointed will not work.
So what I looking for is a work around for jquery watermark and postback.
Looks like my option is instead of using auto postback of dropdownlist, I will have to make an ajax call using jquery on dropdown change and update controls on my page with the returned data from ajax call.
I have tried this in a sample and my WaterMark doesn't blink. I hope that is it unless I come across any side-effects.
If anyone has other inputs / suggestions, I am going to leave this open for a while.
精彩评论