Jquery focus() doesn't work when tabbing?

Question

Hello,

I have setup some basic code that triggers on focus of various input fields:

        var div = '<div class="formHint">Content</div>';                 

       $j('.textbox').blur(function() {
          $j(".formHint").remove();
        });


       $j('.textbox').click(function() {

        $j(this).focus().before(div);
        $j(this).prev(".formHint").animate({ 
     marginLeft: "325px",
     opacity: "1"
     }, 200 );


});

Basically, it inserts a DIV after .textbox on focus(), and remove all .textbox on blur().

The problem is, when you tab through the elements, they don't gain focus. Jquerys documentation says

In recent browser versions, the event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

But after doing some research, I don't understand how to apply this?

Answer 1

You need to handle the focus event, not the click event:

$('.textbox').focus(function() {
    $(this).before(div);
    $(this).prev(".formHint").animate({ 
        marginLeft: "325px",
        opacity: "1"
    }, 200 );
});