开发者

Simple way to check if input is in focus and to disable mouseleave function if true

开发者 https://www.devze.com 2023-04-10 09:27 出处:网络
I have to admit that I\'m definitely no jQuery genius but what seems likeasimple solution has just totally eluded me.

I have to admit that I'm definitely no jQuery genius but what seems like asimple solution has just totally eluded me.

Basically I have a drop down script working on a nested ul to display on rollover of its parent. In one of the nested ul I have a form that I would like to stop the mouseleave event if any of the inputs in the form are being entered into.

Here's the original code:

$(document).ready(function() {  

/*------- navigation -------*/
$('.top_menu li').hover(function(){
    var index = $('.top_menu li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});
$('.top_menu li').mouseleave(function(){
        $(this).children('ul').hide();
}); 


$('.login_cart li,.login_cart_captu li').hover(function(){
    var index = $('.login_cart li').index(this);
    if($(this).children('ul').length != 0)
    {
        $(this).children('ul').show();
    }
});

$('.login_cart li,.login_cart_captu li').mouseleave(function(){

        $(this).children('ul').hide();

});

}); 

I'm really only concerned with the .login_cart li portion of the script - that's the only one that has the form within it.

I've tried with a simple if/else statement to not hide if an input has focus but that hasn't worked so far.

Any help anyone could give me o开发者_开发知识库r to shed some light on this would be absolutely wonderful.

Thanks in advance!


you can bind the focus event of the form elements to a function that unbinds the mouseleave event from the .login_cart li:

$("#<form-id> input").focus(function() {
    $(".login_cart li, .login_cart_captu li").unbind("mouseleave");
}

You'll just have to replace with the id of your form or you can use whatever selector you want to select your form.


jQuery 1.6 and newer has :focus built in. Not tested with .not(), but have tested this with a ! in front and .is(":focus"), just looked nicer with .not(); but both should do the same.

 $('.login_cart li,.login_cart_captu li').mouseleave(function(){
       if ($("#<form-id> input").not(":focus")) {
           $(this).children('ul').hide();
       }
 });
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号