1

我有 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 事件没有被触发，因为元素由于某种原因不在焦点上。

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

4

2 回答 2

0

我在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 );
    } );
} );​
于 2012-06-08T16:54:17.907 回答
0

您可以使用: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);
        });
    });
于 2012-06-08T12:49:39.210 回答