Bootstrap Popover在iOS / Safari上触发焦点触发器不可用

我在type="submit"的<button>元素上实现了一个可用的popup窗口，用于表单。

正如Bootstrap文档清楚地指出的那样：

使用focus触发器closures用户下一次点击的popup。

对于正确的跨浏览器和跨平台行为，您必须使用<a>标记， 而不是 <button>标记，还必须包含role =“button”和tabindex属性。

http://getbootstrap.com/javascript/#popovers-examples

但是popup窗口可以通过使用hover触发器的用户的下一次点击来变暗。 我没有使用<a>元素的选项，因为<button>对应于表单提交（长代码块的道歉）：

 <button data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></button> 

问题是在这里，popup窗口是允许的iOS移动设备使用Safari浏览器。 使用<button>之后，如果用户点击页面上的其他位置或popup窗口本身，popup窗口不会被忽略。 这掩盖了表单元素（防止被查看），因此需要修复：

是否有某种forms的解决方法或修复我可以在这里应用，以允许在iOS / Safari浏览器上点击或在网页上的其他地方（Chrome浏览器的默认行为）允许popup窗口，同时保留使用<button>元素表单function？

这个问题可以在这里的开发网站上查看：

http://www.the-session.co.uk/dev_standalone/

Answer 1

您可以使用<a>元素并使其提交表单。 因此，您将遵循bootstrap的build议。

 <a href="javascript:void(0)" onclick="document.getElementById('mc-embedded-subscribe-form').submit(); return false;" role="button" tabindex="0" data-placement="top" data-toggle="popover" data-trigger="hover" title="placeholder text" data-content="placholder text" type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-block btn-success marg-bot-20">Subscribe to Best Hot Tub Updates <i class="fa fa-envelope"></i></a> 

不过，真正的问题可能是关于iOS和引导程序的数据触发器=“焦点”的popup窗口，因为如果你看看bootstrap示例（ http://getbootstrap.com/javascript/#dismiss-on-next-点击 ），它甚至在他们的页面上也不适用于iOS