移动端浏览器中HTML按钮点击后立即失焦问题求助

我之前做按钮切换复选框的功能时，也踩过安卓设备上焦点滞留的坑，给你几个实用的解决方案：

1. 点击后手动移除焦点 #

在你的jQuery点击事件逻辑末尾，直接调用按钮的blur()方法，强制清除焦点状态：

$('.your-toggle-btn').on('click', function() {
  // 你的复选框切换逻辑示例
  const $checkbox = $(this).siblings('.hidden-checkbox');
  $checkbox.prop('checked', !$checkbox.prop('checked'));

  // 关键：移除按钮焦点
  $(this).blur();
});

安卓的触摸交互会让浏览器默认保留元素的:focus状态，手动调用blur()能立刻让按钮回到正常样式。

2. CSS针对性隐藏触摸设备的焦点样式 #

如果你的按钮不需要在触摸场景下显示聚焦反馈，可以用媒体查询只在触摸设备上重置焦点样式，同时保留桌面端键盘导航的焦点（兼顾无障碍需求）：

/* 仅针对触摸设备（如安卓手机） */
@media (hover: none) and (pointer: coarse) {
  .your-toggle-btn:focus {
    outline: none;
    box-shadow: none; /* 若有自定义焦点阴影也需重置 */
    background-color: inherit; /* 若焦点有背景色变化也需重置 */
  }
}

3. 使用:focus-visible伪类（推荐的无障碍友好方案） #

现代浏览器支持:focus-visible伪类，它只会在用户通过键盘导航（比如Tab键）聚焦元素时显示焦点样式，触摸点击时不会触发。用这个方案能完美兼顾触摸和键盘场景：

.your-toggle-btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

既解决了安卓端触摸后焦点滞留的问题，又不会影响键盘用户的无障碍体验。

你可以根据自己的需求选一种，我个人更推荐第三种，对无障碍友好度更高～

内容的提问来源于stack exchange，提问作者Taylor A. Leach