Событие фокуса для кнопки не срабатывает на iPad - PullRequest
Новая
       26

Событие фокуса для кнопки не срабатывает на iPad

0 голосов
/ 18 января 2019

Я хочу добавить на свой сайт загрузочный поповер. Он должен отображаться, когда пользователь нажимает кнопку с помощью события фокуса. Это работает на рабочем столе, но не на iPad. Похоже, что Safari на iOS вообще не вызывает событие фокуса для кнопок.

В качестве обходного пути я заменил кнопку тегом. Это работает, но дает некоторые другие проблемы, такие как отсутствие отключенного состояния без добавления определенного класса. 

<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?

1 Ответ

0 голосов
/ 08 мая 2019

Решение было довольно простым. Вы просто не можете использовать button на устройстве iOS, потому что у него нет события фокуса. Вместо этого вы должны использовать тег 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>
...