为啥在单击事件后聚焦时不应用浏览器默认聚焦样式？

Posted 2023-05-08

【中文标题】为啥在单击事件后聚焦时不应用浏览器默认聚焦样式？

【英文标题】：Why is the browser default focus style not applied when focusing after a click event?为什么在单击事件后聚焦时不应用浏览器默认聚焦样式？

【发布时间】：2020-01-15 14:44:42

【问题描述】：

我有一个在按下按钮后出现的控件。当它出现时，有一些复选框。我想专注于第一个复选框。

在使用 tab 键后使用 enter 键“单击”按钮时，这可以正常工作。 如果您选择按钮然后用鼠标单击，它也可以工作。 如果您在没有先获得焦点的情况下单击按钮，它将无法正常工作。

请参阅以下内容以了解我所拥有的内容。

$('button.goBtn').on("click", () => 
  let c = $('.inputs input:checkbox:first');
  c.focus();
);

.inputs ul 
   list-style-type: none;


.inputs label 
   margin-left:10px;

button 
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button">Stop</button>
<button type="button" class="goBtn">Go</button>
<div class="inputs">
 <ul>
     <li><input type="checkbox" id="c1" value="1"/><label for="c1">Checkbox 1</label></li>
     <li><input type="checkbox" id="c2" value="2"/><label for="c2">Checkbox 2</label></li>
     <li><input type="checkbox" id="c3" value="3"/><label for="c3">Checkbox 3</label></li>
     <li><input type="checkbox" id="c4" value="4"/><label for="c4">Checkbox 4</label></li>
 </ul>
</div>

第一个复选框实际上是聚焦的，正如您可以通过按空格键看到的那样，但它不是“视觉上”聚焦的。

您也可以通过包含 input:focus 样式来查看此内容，但我不想这样做。

【问题讨论】：

我将 chrome 添加到标签列表中。这个问题在 Firefox 中没有发生。

我发现它在 Firefox 中也不能正常工作 - 只是更奇怪。如果你首先让它工作，那么它总是在页面上工作。

Fwiw，我没有在测试网页中测试，只是上面的代码 sn-p。我现在可以试试。

等一下，单击“Go”会刷新页面，所以一切都会重置，就像它应该的那样（没有焦点）。如果单击 Go 时没有发生这种情况，请更新详细信息。

页面不应该刷新。这可能是因为我忘记包含按钮的类型。我已经编辑了 sn-p 以包含 type="button"

【参考方案1】：

你不需要 JS / Jquery 来工作（你想要的可以通过 输入控件本身），因此第一个复选框应为：

<input type="checkbox" id="c1" value="1" autofocus/>

它在 chrome 和 IE 中工作

【讨论】：

如果页面上没有其他可以关注的内容，这可能会起作用。不过，现实生活页面上还有更多项目。