如何默认聚焦一个按钮？答案

【问题标题】：How to focus one button by default?如何默认聚焦一个按钮？
【发布时间】：2022-11-16 12:08:46
【问题描述】：

我在使用 2 个按钮时遇到问题，每个按钮切换不同的“div”元素。我想默认关注“按钮 1”。我怎么做？自动对焦不工作。
这是 HTML 代码

<div class="filter">
     <button class="filter-btn active" data-target="#block-1" autofocus>1</button>
     <button class="filter-btn" data-target="#block-2">2</button>
 </div>

这是JS代码

let $blocks = $(".block-card");

$(".filter-btn").on("click", (e) => {
  let $btn = $(e.target).addClass("active");
  $btn.siblings().removeClass("active");

  let selector = $btn.data("target");
  $blocks.removeClass("active").filter(selector).addClass("active");
});

【问题讨论】：

要测试 autofocus 是否有效，请尝试将此 button:focus{ background-color: red !important; } 放在全局 css 中并重新加载页面。如果带有autofocus 的按钮背景变为红色，则表示autofocus 正在工作。
我有一个 css 代码，当我单击它们时可以使用。只是它在页面加载时不会自动聚焦。

标签： javascript html jquery css

【解决方案1】：

如果 autofocus 由于浏览器行为或其他元素的样式而无法正常工作，您仍然可以使用 Javascript 设置焦点。

例子：

document.querySelector(".filter-btn.active").focus({focusVisible: true});

{focusVisible: true} 在这里是可选的，它强制浏览器使焦点可见。

有一个 jQuery 等效项，但它似乎不采用可选配置。

例子：

$(".filter-btn.active").focus();

可以添加一些 CSS 以使测试更容易。

例子：

button:focus {
  color: crimson;
}

button:focus-visible {
  outline: 2px solid crimson;
  border-radius: 3px;
}

运行以下示例时，请注意应聚焦第一个按钮。

完整示例：（使用下面的按钮实时运行）

document.querySelector(".filter-btn.active").focus({focusVisible: true});

button:focus{ color: crimson }

button:focus-visible {
    outline: 2px solid crimson;
    border-radius: 3px;
}

<div class="filter">
     <button class="filter-btn active" data-target="#block-1">1</button>
     <button class="filter-btn" data-target="#block-2">2</button>
 </div>

希望这会有所帮助！

【讨论】：