如果在引导模式中,日期选择器中的月份选择在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
4条答案
按热度按时间t9aqgxwy1#
我找到了两个修复此错误的方法:
**修复1:如果您删除了div.modal中的tabindex属性,月份选择就可以正常工作。 我使用此解决方案的唯一问题是,在IE(任何版本)上,您仍然需要双击月份下拉列表才能打开它。
**修正2:**第二个解决方案可在以下位置找到:http://jsfiddle.net/nKXF2/1/通过覆盖this question中建议的enforceFocus函数,您可以再次使用月份下拉菜单。
我觉得这第二个是最好的。
s6fujrry2#
首先尝试仅检测Firefox浏览器
w8f9ii693#
我也遇到过同样的问题,但这是因为我在输入框上有填充。一旦删除它就修复了一切。这让我觉得我讨厌Firefox,尽管这是我的错。:P
kognpnkq4#
遇到这个问题后,我不仅需要找到解决方案,还要弄清楚为什么会发生这种情况。结果发现,提出的解决方案可能会破坏一些东西(在我正在修复的项目中,使用Tab键导航很重要)。
这个bootstrap issue被证明非常有帮助。
基本上模态试图囤积焦点(这就是
enforceFocus
函数的作用)。这样做是为了防止在模态打开时导航到模态之外(就像使用屏幕阅读器或使用键盘上的TAB键导航时)。datepicker
有自己的弹出窗口,位于模态之外。因此,月份下拉菜单无法保持焦点,并立即关闭。这是“在日历上选择日期不是问题,因为单击不需要焦点。用一个空函数替换
enforceFocus
确实有助于月份下拉列表,但可能允许在模型之外导航,即使它是打开的。另一方面,
tabindex="-1"
表示无法导航到该元素,因此您无法使用正常方法将焦点移动到隐藏模态(再次使用TAB键或通过一些辅助功能)。可能,如果您从modal中删除tabindex
,它的enforceFocus
将不会运行。其缺点也是,允许modal在打开时被导航出,还能在它隐藏的时候导航进去。从Bootstrap 4开始,还有一个
focus
选项,当设置为false
时,将不会使模态囤积成为焦点(它可能只是跳过运行enforceFocus
)。不用说,虽然更方便,但它也有与替换
enforceFocus
相同的问题。其他选项包括:
我不知道为什么这在FireFox中是一个问题,但在其他浏览器中不是。