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

Question

我想在我的网站上添加一个 bootstrap 弹出窗口。当用户使用焦点事件按下按钮时，它应该会出现。这适用于桌面，但不适用于 iPad。 iOS 上的 Safari 似乎没有引发按钮的焦点事件。

作为解决方法，我用 a 标签替换了按钮。这确实有效，但会带来一些其他问题，例如在不添加特定 class 的情况下缺少禁用状态。

<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，因为它没有焦点事件。相反，您应该使用带有 role="button" 的 a 标签和有效的 tabindex 设置。

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

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

Focus event for button doesn't fire on iPad

html

javascript

ios

bootstrap-popover

bootstrap-4