Highlighting / Unhighlighting Textboxes ... Consistently!
I'm using jQuery to spruce up an existing web application. It's an ASP.Net 3.5 app. I thought a good place to start was the simple highlighting / unhighlighting of a textbox's background color when it gained focus and then lost focus.
In my app I have a Master Page that is referenced by every Content Page. So I got jQuery 1.3.2 up & running from the Master Page. Here then is the code I've written to accomplish the task:
-
function main()
{
$("input[type=text]").focus(textboxHighlight).blur(textboxRemoveHighlight);
$("input[type=password]").focus(textboxHighlight).blur(textboxRemoveHighlight);
$("textarea").focus(textboxHighlight).blur(textboxRemoveHighlight);
}
function textboxHighlight()
{
$("#" + this.id).css({'background-color':'lightblue'});
}
function textboxRemoveHighlight()
{
$("#" + this.id).css({'background-color':'white'});
}
It sort of works but there are some problems. Here are two specific questions I have:
1. Why does it work on some pages but not on others? Put another way, what could be different about those pages on which it doesn't work?
2. Where applicable, in the server-side code pages I use the 'SetFocus' method to place the cursor inside the appropriate textbox. Why does this prevent the jQuery code from highlighting the textbox?
Any help would be much appreciated!