Beating the TextBoxWatermarkExtender in the Focus game

You've probably read my earlier post about setting focus on a form element. All went well. Then, things went to the U.I. guy who went crazy with the TextBoxWatermarkExtender control and now none of your forms have focus on a form element any more :-(

I guess the developers of the TextBoxWatermarkExtender didn't think of all the possible ways in which people would use the control - some people actually do want to keep the focus on a control to help their keyboard-loving users.

Anyway, I set out to try different ways to get focus on the control. I created a master page and content pages, just to simulate a real scenario (You do use Master pages in all your apps, right?). I then started with the simple TextBox1.Focus(); and, umm... that didn't work.

I then thought I'd go the way of JavaScript because I did encounter some scenarios in which the ASP.NET means of obtaining focus didn't work, but the JavaScript version did work (although I didn't take the time to diagnose the problem as we needed a quick-fix). I then proceeded to go with the Page.ClientScript.RegisterStartupScript, but the string turned out to be a little too icky and unread so I went to the end of the page code in the ASPX file and created a SCRIPT block. Okay, now let's get a reference to the textbox the quick-and-dirty way since I'm not expecting to change the IDs or anything. I ended up with this code:

window.onload = function() {
  var txtbox = document.getElementById("ctl00_ContentPlaceHolder1_TextBox1");
  txtbox.focus();
}

It didn't work :-( I also had the TextBox1.Focus() in the Page_Load event to make sure that I get focus, but neither of the two worked.

I then decided to try a Google search. A quick search later, I landed on a page which I think was on the ASP.NET forums that was totally unrelated to getting focus - it was about using JavaScript to set a value in a textbox that had a TextBoxWatermarkExtender on it. The solution was to change the className property of the textbox via JavaScript and I decided to give it a shot. I changed my code to:

window.onload = function() {
  var txtbox = document.getElementById("ctl00_ContentPlaceHolder1_TextBox1");
  txtbox.className = '';
  txtbox.focus();
}

...and still nothing :-(

Now, although the post on the forum wasn't marked as the answer, I thought it might have worked for the original poster since it sounded a bit weird and weird things have a way of working but in the end, what matters is that it didn't work for me.

I then thought - what if my JavaScript was getting the focus on the textbox, but the ASP.NET code for obtaining focus was triggering some insane maniac function within the TextBoxWatermarkExtender and taking focus away? I commented out the TextBox1.Focus(); statement with a quick double front-slash and voila! My page loaded with the focus on the text box!!!

The code didn't make it into today's build of the code, but you can bet the first thing I'll do tomorrow will be slapping that code onto every page in the project containing an eligible form element (which in our case is a textbox).

PS: Just in case you lost me somewhere in the article, the code that worked is:

window.onload = function() {
  var txtbox = document.getElementById("ctl00_ContentPlaceHolder1_TextBox1");
  txtbox.className = '';
  txtbox.focus();
}