Textbox Hint/Watermark Problem

[Johnny Jörgensen]

I was asked to implement hints in two textboxes, UserName where it should
say "Enter UserName" in gray when the txtbox is empty and show the username
in black when it has been entered.

That's no big problem, but It was asked to do the same for the Password box,
and that seems to be hard to do according to my googling.

I finally came up with a solution that works for us (in most cases): Set the
textbox background image to a watermark image with the desired text from CSS
depending on whether or not something is filled in or not - and then change
the style from javascript when it is changed. Here's the code I used (which
works):

CSS:
..WaterMarkedUserNameBox{border:1px solid
#7FB986;color:black;display:inline;background:#ffffff;visibility:visible;width:158px;background:url(../images/username.gif)
no-repeat;}
..WaterMarkedPasswordBox{border:1px solid
#7FB986;color:black;display:inline;background:#ffffff;visibility:visible;width:158px;background:url(../images/password.gif)
no-repeat;}
..NormalTextBox{border:1px solid
#7FB986;color:black;display:inline;background:#ffffff;visibility:visible;width:158px;text-align:left;}

ASP.NET code:

protected void Page_Load(object sender, EventArgs e)
{
ApplyWaterMarkToTextBox(txtUserName, "WaterMarkedUserNameBox",
"NormalTextBox", false);
ApplyWaterMarkToTextBox(txtPassword, "WaterMarkedPasswordBox",
"NormalTextBox", true);
}

public void ApplyWaterMarkToTextBox(TextBox textBox, string waterMarkStyle,
string normalStyle, bool IsPassword)
{
textBox.Attributes.Add("OnFocus", "javascript:js_waterMark_Focus('"
+ textBox.ClientID + "','" + waterMarkStyle + "', '" + normalStyle + "')");
textBox.Attributes.Add("OnBlur", "javascript:js_waterMark_Blur('" +
textBox.ClientID + "','" + waterMarkStyle + "', '" + normalStyle + "')");
textBox.CssClass = waterMarkStyle;
if
(!textBox.Page.ClientScript.IsClientScriptBlockRegistered("WaterMarkScript"))
{
StringBuilder scriptBuilder = new StringBuilder(string.Empty);
scriptBuilder.Append(@"<script language = ""javascript"">" +
Environment.NewLine);
scriptBuilder.Append(" function js_waterMark_Focus(objname,
waterMarkStyle, normalStyle)" + Environment.NewLine);
scriptBuilder.Append(" {" + Environment.NewLine);
scriptBuilder.Append(" obj =
document.getElementById(objname);" + Environment.NewLine);
scriptBuilder.Append(" obj.className = normalStyle" +
Environment.NewLine);
scriptBuilder.Append(" }" + Environment.NewLine);
scriptBuilder.Append(Environment.NewLine);
scriptBuilder.Append(" function js_waterMark_Blur(objname,
waterMarkStyle, normalStyle)" + Environment.NewLine);
scriptBuilder.Append(" {" + Environment.NewLine);
scriptBuilder.Append(" obj =
document.getElementById(objname);" + Environment.NewLine);
scriptBuilder.Append(@" if(obj.value == '')" +
Environment.NewLine);
scriptBuilder.Append(" {" + Environment.NewLine);
scriptBuilder.Append(" obj.className = waterMarkStyle"
+ Environment.NewLine);
scriptBuilder.Append(" }" + Environment.NewLine);
scriptBuilder.Append(" else" + Environment.NewLine);
scriptBuilder.Append(" {" + Environment.NewLine);
scriptBuilder.Append(" obj.className = normalStyle" +
Environment.NewLine);
scriptBuilder.Append(" }" + Environment.NewLine);
scriptBuilder.Append(" }" + Environment.NewLine);
scriptBuilder.Append("</script>" + Environment.NewLine);
textBox.Page.ClientScript.RegisterClientScriptBlock(textBox.Page.GetType(),
"WaterMarkScript", scriptBuilder.ToString(), false);
}
}

HERE COMES THE BIG PROBLEM:

When showing the page in Firefox, you have the option of having Firefox
remember the login information or not. If you don't, the code above works
perfectly, but if Firefox remembers the login information, then the page is
rendered first, and because the UserName and Password boxes are empty, the
watermark image is shown.

THEN - when the page has been rendered, Firefox fills in the UserName and
Password. But neither "OnFocus" nor "OnBlur" is fired (not "OnChange" either
for that matter or any other events as far as I can tell), so the javascript
never detects the change the way it would if the info had been entered
manually.

WHAT can I do to detect that Firefox has entered the login information and
change the CSS style of the textboxes accordingly?

TIA,
Johnny J.