Bootstrap 在Firefox中,引导模式中的日期选择器中的月份选择不起作用

yx2lnoni  于 2023-03-21  发布在  Bootstrap
关注(0)|答案(4)|浏览(210)

如果在引导模式中,日期选择器中的月份选择在FireFox中不起作用。

<button class="btn" id="btn">Click Me</button>

<div class="modal hide" id="modal" tabindex="-1">
    <div class="modal-body">
        <input type="text" id="datepicker" />        
    </div>
</div>

JavaScript语言:

$("#datepicker").datepicker({"changeMonth": true});

$('#btn').click(function() {
    $("#modal").modal('show');
});

下面是一个简化的例子:http://jsfiddle.net/nKXF2/
我发现了一个类似的twitter-bootstrap github问题:https://github.com/twbs/bootstrap/issues/5979

t9aqgxwy

t9aqgxwy1#

我找到了两个修复此错误的方法:

**修复1:如果您删除了div.modal中的tabindex属性,月份选择就可以正常工作。 我使用此解决方案的唯一问题是,在IE(任何版本)上,您仍然需要双击月份下拉列表才能打开它。
**修正2:**第二个解决方案可在以下位置找到:http://jsfiddle.net/nKXF2/1/通过覆盖this question中建议的enforceFocus函数,您可以再次使用月份下拉菜单。

$('#modal').on('show', function () {
    $.fn.modal.Constructor.prototype.enforceFocus = function () { };
});

我觉得这第二个是最好的。

s6fujrry

s6fujrry2#

首先尝试仅检测Firefox浏览器

if (navigator.userAgent.toLowerCase().indexOf('firefox') !== -1) {
		$.fn.modal.Constructor.prototype.enforceFocus = function (){};
	}
w8f9ii69

w8f9ii693#

我也遇到过同样的问题,但这是因为我在输入框上有填充。一旦删除它就修复了一切。这让我觉得我讨厌Firefox,尽管这是我的错。:P

kognpnkq

kognpnkq4#

遇到这个问题后,我不仅需要找到解决方案,还要弄清楚为什么会发生这种情况。结果发现,提出的解决方案可能会破坏一些东西(在我正在修复的项目中,使用Tab键导航很重要)。
这个bootstrap issue被证明非常有帮助。
基本上模态试图囤积焦点(这就是enforceFocus函数的作用)。这样做是为了防止在模态打开时导航到模态之外(就像使用屏幕阅读器或使用键盘上的TAB键导航时)。datepicker有自己的弹出窗口,位于模态之外。因此,月份下拉菜单无法保持焦点,并立即关闭。这是“在日历上选择日期不是问题,因为单击不需要焦点。
用一个空函数替换enforceFocus确实有助于月份下拉列表,但可能允许在模型之外导航,即使它是打开的。
另一方面,tabindex="-1"表示无法导航到该元素,因此您无法使用正常方法将焦点移动到隐藏模态(再次使用TAB键或通过一些辅助功能)。可能,如果您从modal中删除tabindex,它的enforceFocus将不会运行。其缺点也是,允许modal在打开时被导航出,还能在它隐藏的时候导航进去。
从Bootstrap 4开始,还有一个focus选项,当设置为false时,将不会使模态囤积成为焦点(它可能只是跳过运行enforceFocus)。

$("#MyModal").modal({ show: true, focus: false });

不用说,虽然更方便,但它也有与替换enforceFocus相同的问题。
其他选项包括:

  • 使用一个不同的日期选择器,将其所有元素保留在模态
  • 使用本机html日期选取器
  • 将日期选择器中的选择替换为看起来很像但不需要焦点来操作的元素

我不知道为什么这在FireFox中是一个问题,但在其他浏览器中不是。

相关问题