Highlighting the “current” textbox on a web form

Question

I have a data entry web app where the control that has focus is given a yellow background color (and when the user navigates away, it turns back to white). The script to do this came from I-don't-know-where, and it breaks in IE7 causing all sorts of problems, like drop downs not working (the script was designed to work on textboxes and drop downs, or at least it was implemented with that in mind), and it works in ie6.

Some of my users have been switched to Ie7 without my being informed, and the rest will go to ie7 at some future time. So, I'd like to implement a friendlier solution. I really like jquery and am already using it on the app for a variety of things. Also, it has been suggested that cross browser support may/will eventually be important on the intranet.

What I would prefer to avoid is manually adding a bunch of onblur="SomeMethod()" (or something similar) to the controls (There must be 600+ in the app). In fact, if I tell my boss this he's probably going to throw something at me.

I am already using JQuery in the application. Where it is used function calls are explicit, and are all called in onblur.

Currently, I am of the mind to do something like this:

$(document).ready (function( 
    $(':text').focus(function() 
    { 
        //Do Highlighting
    }

    $(':text').blur(function()
    {
        //Good bye highlighting
    }
)

1. Am I on he right track? Is onblur my best option? Is there a better way?
2. the other onblur functions show/hide child fields based on the value of the parent. I realize I am not providing code, but am I setting myself up for any conflicts?

Answer 1

Use jQuery's blur() and focus() methods.

Also, I think you mean to REMOVE highlighting with your blur function (blur means the user has clicked off of the element in question). Use focus() to turn on the highlighting.

$(document).ready (function() {
    $(':text').focus(function() { 
        $(this).addClass('highlight');
    });
    $(':text').blur(function() { 
        $(this).removeClass('highlight');
    });
});

Answer 2

There seems to be a workaround that makes the :focus pseudo-class work in IE6/7. I haven't used it myself but I think it's quite a established solution:

http://www.xs4all.nl/~peterned/csshover.html

With 600+ elements, a scriptless workaround is probably preferable, especially if older clients are involved.

Answer 3

$('textarea, input:text').focus(function() {
     $(this).addClass('hilite');
}).blur(function() {
     $(this).removeClass('hilite')
});

.hilite {
  border: 2px solid gray;
}

Answer 4

blur/focus will work for you. If you're able, at some point, to move all your users all the way to IE8 you can also accomplish the desired effect with CSS:

input[type=text]:focus { 
    background-color: lightyellow; 
}

Answer 5

有一个免费的小部件库可用于此任务： 焦点突出小部件 。

Answer 6

This doesn't answer your question, but is an alternative... jQuery Tools Expose will apply an overlay to all elements outside your input box thus forcing the user to focus on the input. It's a nice feature and the plugin is very lightweight. I also posted some coding that does the same thing in this answer in case you don't want to use a plugin.