jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用

Posted 2023-05-08

【中文标题】jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用

【英文标题】：Foundation datepicker in jquery ui dialog not working in internet explorer

【发布时间】：2018-11-18 16:55:09

【问题描述】：

我在应用程序的浏览器测试期间检测到一个奇怪的错误：

https://jsfiddle.net/jeroendemuyt/w6prze3t/91/

我有一个 jQuery UI 对话框，它有一个输入元素，我在其中应用了基础日期选择器功能。

<div class="field-dialog-2">
    <input type="text" class="load-datepicker">
</div>

在大多数浏览器中，这都能正常工作。但是，在 Internet Explorer 11 中，这会中断。当对话框展开时，您不能使用后退和前进按钮。当我按下按钮时，它总是想回到开始的月份/十年/...

正如您在小提琴中看到的那样，我尝试了几种方法来查看问题的原因。看来 jquery 对话框与基础日期选择器的组合在 Internet Explorer 中效果不佳。

有人知道如何解决这个问题吗？我真的希望它与 IE 兼容

【问题讨论】：

怀疑这是操作顺序问题。但如果它在其他浏览器而不是 IE 中运行良好，这并不让我感到惊讶，它的呈现方式可能还有其他问题。您测试过哪些版本的 IE 以及哪些平台？

我已经在 Windows 10 上使用 IE 11 进行了测试。由于我们的网站不支持移动设备，我只需要在桌面版本上支持 IE 11

【参考方案1】：

经过大量试验，我自己解决了这个问题。

问题在于，由于某种原因，IE 在单击日期选择器中的任意位置后尝试再次将焦点放在对话框上。

因此，当我单击日期选择器中的任何控件时，除了更改月份/十年/...的正常单击处理程序外，它还将焦点放在对话框上。由于 JQuery UI 对话框具有自动对焦功能，这意味着对话框将焦点传递给 datepicker 输入元素，从而将 datepicker 重置为开始日期。这基本上取消了我在日期选择器上所做的任何操作。

我已通过手动覆盖我的 javascript 代码中的自动对焦功能并在对话框获得焦点时强制它不执行任何操作来解决此问题。由于我在我的应用程序中没有使用此自动对焦事件执行任何操作，因此这对我没有任何影响

$.ui.dialog.prototype._focusTabbable = $.noop;

我也用我的解决方案更新了我的 jsFiddle：https://jsfiddle.net/jeroendemuyt/w6prze3t/110/

我希望这个解决方案可以减轻其他人在解决这个问题时的压力:)