Question

我有2个表单输入，其中onFocus我想隐藏页面上的另一个元素。

$(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);
        });
    });

非常基本的东西，但我还需要确保在这两个输入（.email和.password）之间切换时隐藏元素不再可见。

似乎有时当我在它们之间切换时隐藏元素闪烁回到视图中，或者.focus事件没有被触发，因为元素由于某种原因没有聚焦。

无论如何我说，如果在.email和amp;之间切换，则隐藏.note元素。 .password保持隐藏状态，直到这两个元素都失去焦点？

Answer 1

您可以使用:focus来验证其他字段当前是否已被关注。

$(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

我在jsFiddle上尝试了一些事情并提出了以下解决方案。似乎blur()正在focus()之前执行，这就是为什么它会消失然后立即淡出。

我设置了超时，在短时间后延迟模糊事件，因此我们可以在执行模糊之前检查新元素是否已被聚焦。

$( 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 );
    } );
} );

隐藏元素onFocus并显示onBlur

2 个答案: