JQuery/Javascript两个控件的focus和blur事件

最新推荐文章于 2024-01-04 16:25:18 发布

震天之虎虎

最新推荐文章于 2024-01-04 16:25:18 发布

阅读量1.7k

点赞数

文章标签： javascript jquery focus blur

本文链接：https://blog.csdn.net/hguo87/article/details/40891599

版权

想在网页上实现这样的功能：点击文本框时，出现一个下拉列表（动态生成，用div+a实现）；选择下拉列表中的选项可以改变文本框中的字符串；两者都失去焦点的话，下拉列表消失。问题出在了消失上。如果在文本框blur的时候hide列表，那么一点击列表，文本框就会失去焦点而隐藏列表，导致无法运行点击事件。

也就是说，两个控件，只要一个控件有焦点，列表就不消失，而只有两个控件都失去焦点的时候，列表才会消失。最后用setTimeout实现，不知道有没有更好的办法。。代码如下：

var shouldbeshowing = false;
var tip_timer = null;

$(document).ready(function(){
    
    $("#input1").click(function(){
        var c = $("#input1");
        c.val("");
        var e = $("#selectpanel");
	    var d = c.offset();
	    var a = d.left;
	    var b = d.top + c.outerHeight()+5;
	    e.css({left:a+"px",top:b+"px"}).show();
        }
	shouldbeshowing = true;
	if(tip_timer){clearTimeout(tip_timer);}
    });
    
    $("#input1").bind("blur", function(){
        inputblur();
    });
    
    $("#selectpanel").mouseenter(function(){
        $("#input1").unbind("blur");
    }).mouseleave(function(){        
        $("#input1").bind("blur", function(){
            inputblur();
        });
        $("#input1").focus();
    });
});

function inputblur(){
    shouldbeshowing = false;
    if(tip_timer){clearTimeout(tip_timer);}
    tip_timer=setTimeout(function(){
        if(!shouldbeshowing){
            $("#selectpanel").slideUp();
        }
    },200);
}