【问题标题】:Orphaned jQuery Datepicker reappearing when navigating back to page in IE10在 IE10 中导航回页面时,孤立的 jQuery Datepicker 重新出现
【发布时间】:2013-10-10 06:19:47
【问题描述】:

此问题与Internet Explorer 10 相关,这是我正在测试的内容,不会影响我当前的Firefox or Chrome 版本。

在 Internet Explorer 中重现的步骤

  1. 导航到:http://jqueryui.com/datepicker/
  2. 单击日期字段以显示datepicker
  3. 当它打开时,导航到您的IE 窗口旁边的另一个应用程序窗口,然后返回IE 并单击datepicker 面板中的一些空白区域。
  4. 您应该会看到datepicker 消失然后重新出现,我认为这与上次获得焦点的控件在您单击返回时重新获得焦点有关。

我注意到的:

  • 如果您最小化和最大化IE,则不会发生
  • 如果您执行相同的步骤而不单击另一个应用程序并直接单击空白区域,则不会发生这种情况
  • 如果您有并排的窗口/应用程序或在 2 个显示器上,它可以始终如一地工作

虽然我可以接受这是一个小问题并且看起来并不像一个错误,但它在我们的应用程序中变得更像一个问题,datepicker 显示为弹出窗口的一部分,在您单击后消失远离它。

带有父容器的日期选择器:

孤立的日期选择器再次出现:

我的尝试:

我看到了与 datepicker 的可见性相关的帖子,这些帖子暗示了以下内容,我已经对其进行了测试:

$("#my-datepicker-div").datepicker('destroy');
$("#my-datepicker-div").datepicker('disable');

尽管我很乐意忽略这种极端情况,但它还是作为我需要修复的错误提出的。我只是不确定还有什么可以尝试的。

【问题讨论】:

    标签: jquery jquery-ui internet-explorer internet-explorer-10 jquery-ui-datepicker


    【解决方案1】:

    我可以通过调用在 IE 10 中修复(刷新然后关闭,所以有一点闪烁):

    $("#datepicker").datepicker("hide");
    

    在 div 关闭时调用的函数中(在这个快速示例中,您在返回窗口时单击 div 的外侧)。此处的小提琴示例:http://jsfiddle.net/anyuG/

    要重现您为 IE 10 描述的行为,只需在 disablepopup() 函数中注释掉该行,您就可以重现孤立的日期选择器窗口。如果您将实际示例发布为小提琴,我们可以使用它。

    在此处获取弹出 div 示例:http://istockphp.com/jquery/creating-popup-div-with-jquery/

    更新

    处理这个问题的另一种方法是让用户使用$(window).blur()$(window).focus() 函数。我认为这看起来不错,请注意关闭窗口离开,如果您在白框内单击则重新打开,如果您在白框外单击则重新打开但全部关闭:

    $(window).blur(function(e) {
        $("#datepicker").datepicker("hide");
    });
    

    更新了小提琴。与.focus() 一起玩,以确定您喜欢的最佳组合,您应该很好。也可能只想检测 IE 10,并且仅在该浏览器中运行此代码。

    小提琴:http://jsfiddle.net/78252/1/

    【讨论】:

    • 感谢您的提琴,当行注释掉时,它可以正确重现问题。虽然您的解决方案确实关闭了日期选择器,但在关闭之前让它闪回感觉并不正确。
    • 同意,我不确定我是否有更好的解决方案,因为它完全闪烁,因为它说明了页面的行为方式(事件顺序)。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-24
    • 1970-01-01
    • 2016-10-11
    相关资源
    最近更新 更多