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

Posted 2023-05-07

【中文标题】引导模式内的日期选择器中的月份选择在 Firefox 中不起作用

【英文标题】：Month select in datepicker inside a bootstrap-modal won't work in Firefox

【发布时间】：2014-03-29 19:51:17

【问题描述】：

如果日期选择器中的月份选择在引导模式中，则它在 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

【参考方案1】：

我为这个错误找到了两个修复：

修复 1： 如果您删除 div.modal 中的 tabindex attr，月份选择就可以正常工作。 我对这个解决方案的唯一问题是，在 IE（任何版本）上，您仍然需要双击月份下拉菜单才能打开它。

Fix2：您可以在以下位置找到第二个解决方案：http://jsfiddle.net/nKXF2/1/ 通过覆盖 this question 中提出的 enforceFocus 函数，您可以再次使用月份下拉菜单。

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

我认为第二个是最好的。

【讨论】：

第二次修复为我做了。该事件可能在更新的 Bootstrap 版本中发生了变化，因为我不得不使用它：$('#modal').on('show.bs.modal' ...

你这个摇滚人。第二个修复对我有用。我找了很久。非常感谢。

因为，Bootstrap 3 我们需要使用$('#modal').on('shown.bs.modal', function() ) 而不是$('#modal').on('show', function () );

【参考方案2】：

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

【参考方案3】：

首先尝试只检测firefox浏览器

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