React Codesandbox中focus()在Chrome、Firefox浏览器无法正常工作

原因解释 #

Chrome和Firefox这类现代浏览器会区分用户键盘操作触发的焦点和脚本调用focus()触发的焦点：

• 对于键盘操作（比如Tab键）触发的焦点，会显示默认的蓝色边框，这是无障碍设计的一部分，帮助键盘用户识别当前焦点位置。
• 但如果是通过JS脚本直接调用focus()方法设置的焦点，浏览器默认会隐藏这个蓝色边框，目的是避免非用户主动操作导致的不必要视觉干扰。
• Safari在这一行为上没有做区分，所以无论哪种方式触发焦点，都会显示默认的焦点样式。

解决方法 #

你可以通过以下方式让脚本触发的焦点也显示视觉反馈：

1. 自定义焦点样式

给按钮添加自定义的聚焦样式，覆盖浏览器的默认行为：

button:focus {
  outline: 2px solid #007bff; /* 自定义蓝色边框，和默认样式接近 */
  outline-offset: 2px;
}

如果想保留浏览器对键盘/脚本焦点的区分，可以用focus-visible伪类，只在键盘触发或需要显示焦点时应用样式：

button:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

2. 强制浏览器显示脚本触发的焦点（Chrome/Edge特定）

在调用focus()时传入focusVisible选项（Chrome 86+支持）：

firstBtn.current.focus({ focusVisible: true });

这个选项会告诉浏览器，即使是脚本触发的焦点，也要当作“用户可见的焦点”来处理，显示默认的焦点样式。不过这个API目前只有Chrome和Edge支持，Firefox还不兼容，所以更通用的方案还是自定义CSS样式。

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