时间戳

首页 > 解决方案 > Focus event for button doesn't fire on iPad

javascript - Focus event for button doesn't fire on iPad

问题描述

I want to add a bootstrap popover to my site. It should show up, when the user pushes a button by using the focus event. This works on the Desktop, but not on the iPad. It seems like Safari on iOS doesn't raise the focus event for buttons altogether.

As a workaround, I replaced the button with an a tag. This does work, but gives some other issues like a lack of the disabled state without adding a specific 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'
});

In my example, the popover works for the first element, but not for the second.

Is there a way to enable the focus event for buttons on iOS?

标签： javascripthtmliosbootstrap-4bootstrap-popover

解决方案

解决方案非常简单。您根本无法button在 iOS 设备上使用 a，因为它没有焦点事件。相反，您应该使用带有有效设置的a标签。role="button"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>

推荐阅读