隐藏元素onFocus并显示onBlur

Question

I have 2 form inputs where onFocus I want to hide another element on the page.

$(document).ready(function () { 
        $('.email').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            $('.note').fadeTo('fast', 1);
        });
        $('.password').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            $('.note').fadeTo('fast', 1);
        });
    });

Pretty basic stuff, but I also need to ensure that when switching between these two inputs (.email & .password) that the hidden element doesn't become visible again.

It seems that sometimes when I switch between them that the hidden element flickers back into view, or that the .focus event isn't being fired because the element isn't in focus for some reason.

Is there anyway for me to say, the .note element is hidden, if were switching between .email & .password remain hidden until focus is lost from both of these elements?

Answer 1

You could make use of :focus to verify if the other field is currently focused.

$(document).ready(function () { 
        $('.email').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            if ($('.password:focus').length == 0)
                $('.note').fadeTo('fast', 1);
        });
        $('.password').focus(function () {
            $('.note').fadeTo('fast', 0);
        }).blur(function () {
            if ($('.email:focus').length == 0)
                $('.note').fadeTo('fast', 1);
        });
    });

Answer 2

I tried a few things on jsFiddle and came up with the following solution. It appears that the blur() is being executed before the focus() , which is why it fades in then fades out immediately.

I put a timeout that delays the blur event after a short time, so we can check to see if a new element has been focused, before executing the blur.

$( document ).ready( function( ) {
    $( '.email, .password' ).focus( function( ) {
        $( '.note' ).fadeTo( 'fast', 0 );
    } ).blur( function( ) {
        setTimeout( function( ) {
            if( $( '.email:focus, .password:focus' ).length == 0 )
            {
              $( '.note' ).fadeTo( 'fast', 1 );
            }
        }, 100 );
    } );
} );​