<html>
<head>
<title></title>
    <style type="text/css">
        .event_source {position:relative;}
        .popup {width:200px;height:150px;border:solid 1px black;display:none;}
    </style>    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        
    <script type="text/javascript">
        $(function() {
            $(":text").focus(function() {
                var $popup = $("<div class='popup'><p>aaaaaaaaaaaaaaaa</p><p>bbbbbbbbbbbbbbbbb</p></div>");
                $popup.appendTo($("body")).show("slow");
            }).blur(function() {
                $(".popup").hide("slow").end().remove();
            });
        });
    </script>
</head>
<body>
    <input type="text" class="event_source" />
</body>
</html>以上代码实现了:焦点移入text显示弹出层。焦点移出text隐藏弹出层。现在有一个问题:
焦点移出text但落在弹出层内的情况下,不希望隐藏弹出层。
但现在即使焦点落在弹出层里,也是立即就隐藏了。怎么解决这一问题?

解决方案 »

  1.   


    $(":text").focus(function() {
                    var $popup = $("<div class='popup'><p>aaaaaaaaaaaaaaaa</p><p>bbbbbbbbbbbbbbbbb</p></div>");
                    $popup.appendTo($("body")).show("slow");
    $(".popup").mouseover(show);
                }).blur(function() {
                    $(".popup").hide("slow").end().remove();
                });
    function show(){
    //alert("a")
         $popup.appendTo($("body")).show("slow");
    }楼主要是点击的话就要调用其他函数了
      

  2.   

    谢谢您的回答,但不是我要的。
    我再描述一遍问题:
    所谓焦点落在弹出层,指的就是鼠标点击范围在弹出层内。
    举个例子,弹出式日期控件大家都用过。
    在焦点移到text时显示,移出时隐藏。
    但是在对日期控件本身操作(点选年月日)时,不应该因为焦点移出了text而立即隐藏。
    我要的就是日历控件式的效果。
      

  3.   

    text 失去的焦点的 时候判断下 看看鼠标是否在弹出的层里面
      

  4.   

    给弹出层的设置一个isDivFocus变量,获取时设为true,失去时设为false
    然后text失去焦点时判断这个变量。
      

  5.   

    试过了,没用。
    div好像不支持focus()和blur()事件。