Question

我有这个问题。我使用几个按钮作为切换开关，以友好的方式选择和取消选中复选框。在桌面上工作得很好，但是在我的机器人上（还没有测试iPhone）按钮保持“聚焦”状态，直到你点击了其他一些与我的用户体验相关的东西。

我已经阅读了很多关于这个问题的内容，但我还没有找到解决方案，并且认为我会问自己的问题。

已编辑HTML：

<div class="service-option">
  <input type="checkbox">
  <button class="btn btn-sm btn-outline-secondary service-option" type="button">
      Option One
  </button>
</div>

<div class="service-option">
  <input type="checkbox">
  <button class="btn btn-sm btn-outline-secondary service-option" type="button">
      Option Two
  </button>
</div>

我的jQuery只是将按钮的复选框标记为已选中（并将其隐藏起来）并将其切换为btn-secondary而不是btn-outline-secondary用于显示。

编辑JQUERY：

$('.service-option').find('input[type=checkbox]').css("display", "none");
$('.service-option button').click(function() {
    $(this).toggleClass('btn-secondary').toggleClass('btn-outline-secondary');
    var checkbox = $(this).parent().find('input[type=checkbox]');
    checkbox.prop("checked", !checkbox.prop("checked"));
  });

我在点击功能中尝试了很多不同的东西，包括.blur()，但这也没有用。在移动设备上，它只是停留在“灰色背景”的状态，直到我点击屏幕上的其他地方，这使得用户看起来他们没有取消选择按钮，实际上它确实...

在这里读书但也许我错过了一些东西：How to stop buttons from staying depressed with Bootstrap 3

Answer 1

问题在于，在移动设备上，:hover伪类在触摸它时会在元素上保持活动状态，使其看起来处于“焦点”状态。州。这已经成为一个长期存在的问题，并且在解决它时没有一个神奇的子弹。我使用新的媒体查询解决了我的问题并将我的自定义CSS包装在：

@media (hover:hover) {
    [...]
}

http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml

我在哪里找到有关问题的信息。

在移动浏览器上立即模糊HTML按钮

1 个答案: