【问题标题】:jquery on blur but focus on the other onejquery 关于模糊但专注于另一个
【发布时间】:2011-02-18 15:02:49
【问题描述】:

我有一种情况,我有一个带有两个输入元素的隐藏 div,默认情况下它会隐藏,只有在我悬停某些东西时才会显示,如果我悬停,它就会消失。现在,如果输入元素之一被聚焦,我希望该 div 不会消失,如果模糊则消失。我已经解决了这部分,直到,如果焦点从一个输入转移到另一个,div 将消失,我不希望它消失,因为其中一个输入仍然是焦点。

这是我的代码:

// code with the problem I think.
$('#inputText1, #inputText2').live("blur", function() {
    if ($('#myDiv').is(":visible")) {
        if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
});

// hover to show and hide the div
$(".visibleDiv").hover(
    function() {
        $('#myDiv').fadeIn("slow");
    },
    function() {
        if(!$(this).find(".jqTransformInputWrapper").hasClass("jqTransformInputWrapper_focus")) {
            $('#myDiv').fadeOut("slow");
        }
    }
);

我的 HTML:

<div class="visibleDiv">
    hover me
    <div id="myDiv">
        <input name="inputText1" id="inputText1" type="text" />
        <input name="inputText2" id="inputText2" type="text" />
    </div>
</div>

顺便说一句,我使用 jqTransform 作为输入元素。

【问题讨论】:

    标签: jquery focus blur


    【解决方案1】:

    试试这个,

    // code with the problem I think.
    $('#inputText1, #inputText2').live("blur", function() {
    
        if ($('#myDiv').is(":visible")) {
            if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
                $('#myDiv').fadeOut("slow");
            }
        }
    
    }).live("focus",function(){
        $('#myDiv').stop(true,true).show();
    });
    

    【讨论】:

    • 这在没有live 的情况下很好用,但只能在 FF 上使用,在 IE 上可以解决这个问题吗?
    【解决方案2】:

    给输入框一些类并在其上应用 jQuery

    <div class="visibleDiv">
        hover me
        <div id="myDiv">
            <input name="inputText1" id="inputText1" type="text" class="inputbox" />
            <input name="inputText2" id="inputText2" type="text" class="inputbox"/>
        </div>
    </div>
    
    
    // now this will work
    $('.inputbox').live("blur", function() {
     // u can also use this
     // if($(this).parent().is(":visible") )
        if ($('#myDiv').is(":visible")) {
            if (!$(this).hasClass("jqTransformInputWrapper_focus")) {
                $('#myDiv').fadeOut("slow");
            }
        }
    });
    

    注意:使用delegate 而不是直播

    【讨论】:

    • 其实这和我正在做的一样。我的只针对两个。
    猜你喜欢
    • 2017-12-22
    • 1970-01-01
    • 2012-05-19
    • 1970-01-01
    • 1970-01-01
    • 2012-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多