如何默认聚焦指定按钮？autofocus属性失效问题解决

autofocus属性偶尔会因为浏览器焦点调度逻辑、页面加载时序问题失效，直接手动触发焦点是最可靠的方案，给你两种修改方式：

方案一：页面加载后主动聚焦默认按钮 #

在JS代码中添加DOM加载完成后的聚焦逻辑，确保按钮在页面就绪后获得焦点：

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

// 页面DOM加载完成后，聚焦默认的active按钮
$(document).ready(() => {
  $(".filter-btn.active").focus();
});

$(".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");
});

方案二：优化可访问性（可选） #

如果希望切换按钮时焦点也跟随当前选中的按钮，可以在点击事件里也加上聚焦逻辑：

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

$(document).ready(() => {
  $(".filter-btn.active").focus();
});

$(".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");
  
  // 切换后让当前按钮获得焦点
  $btn.focus();
});

额外说明 #

• 确保页面中只有一个元素设置了autofocus属性，多个元素的话浏览器只会聚焦最后一个；
• 手动调用focus()不受浏览器初始渲染时序影响，是解决这类问题的通用方案。

内容的提问来源于stack exchange，提问作者Caser