Question

我想在我的网站上添加引导弹出窗口。当用户使用焦点事件按下按钮时，它应该显示出来。这适用于台式机，但不适用于iPad。看来iOS上的Safari并没有完全引发按钮的焦点事件。

作为一种解决方法，我将按钮替换为标签。确实可以，但是会带来其他一些问题，例如缺少禁用状态而不添加特定类。

<a class="btn btn-outline-secondary" id="ap-btn-selectColor" data-toggle="popover" role="button">
    <i class="fa" style="background-color: rgb(140, 181, 255); width: 16px" id="ap-fgColorSelection">&nbsp;</i>
</a>
<button type="button" class="btn btn-outline-secondary" id="ap-btn-selectBorderColor" data-toggle="popover">
    <i class="fa" style="background-color: rgb(0, 51, 142); width: 16px" id="ap-bdColorSelection">&nbsp;</i>
</button>

$('[data-toggle="popover"]').popover({
    content: function () {
        return $someElement;
    },
    placement: 'auto',
    html: true,
    trigger: 'focus'
});

在我的示例中，弹出框适用于第一个元素，但不适用于第二个元素。

是否可以为iOS上的按钮启用焦点事件？

Answer 1

解决方案非常简单。您根本无法在iOS设备上使用button，因为它没有焦点事件。相反，您应该使用带有a的{{1}}标签和有效的role="button"设置。

tabindex

iPad上的按钮焦点事件未触发

1 个答案: