如何以编程方式关注没有大纲的 HTML 元素？

Question

注意：:focus { outline: none } 不应该是答案，因为它还会在使用 Tab 键导航时阻止轮廓

单击按钮不显示轮廓，但按钮变为document.activeElement (JSFiddle)。我想在不点击鼠标的情况下模拟这种行为。

方法应该：

1. 将元素设为document.activeElement。
2. 不引起轮廓
3. 按键盘 Tab 键时仍然允许大纲

（如果有人问，我目前的意图是聚焦一个模态对话框，并在对话框关闭时将焦点返回到上一个聚焦的元素。这需要防止轮廓无缝体验。）

伪代码：

showDialog();

function whenDialogClosed() {
  previouslyFocused.focus(); // should not display outline
}

Answer 1

CSS 最后got an answer 添加了一个伪类:focus-visible，该伪类恰好在browser decides to do 时激活。

因此，现代浏览器应用简单的启发式方法来确定是否应用其默认焦点样式。一般来说，如果一个元素由于鼠标/指针点击而获得焦点，浏览器将抑制它们的默认焦点指示。

截至 2021 年，all modern browsers support this，但是如果您需要支持旧版浏览器，请使用 a polyfill 并执行以下操作：

/*
 * .js-focus-visible is automatically added to document.body
 * to ensure the rules run only in JS-supported environment
 */

.js-focus-visible .your-selector:focus:not(.focus-visible) { outline: none }

演示：

focusrandom.addEventListener("click", () => {
  const num = Math.ceil(Math.random() * 5);
  const button = document.getElementById(`button${num}`);
  button.focus();
});
wofocusrandom.addEventListener("click", () => {
  const num = Math.ceil(Math.random() * 5);
  const button = document.getElementById(`wobutton${num}`);
  button.focus();
});

.js-focus-visible .apply button:focus:not(.focus-visible) {
  outline: none;
}

<script src="https://unpkg.com/focus-visible"></script>
<p class="apply">
  With focus-visible:
  <button id="button1">1</button>
  <button id="button2">2</button>
  <button id="button3">3</button>
  <button id="button4">4</button>
  <button id="button5">5</button>
</p>
<p>
  Without focus-visible:
  <button id="wobutton1">1</button>
  <button id="wobutton2">2</button>
  <button id="wobutton3">3</button>
  <button id="wobutton4">4</button>
  <button id="wobutton5">5</button>
</p>

<button id="focusrandom">Focus random button</button>
<button id="wofocusrandom">Focus random button without focus-visible</button>

（来自https://stackoverflow.com/a/50571098/2460034。谢谢亚伦！）

Answer 2

您可以为未聚焦添加过渡。

var dial = document.getElementById('dial');
var focused;
function openDialog(){
  document.body.className="havingFocus";
  dial.className="";
  focused = document.activeElement;
  document.getElementById('new_focus').focus();
}
function closeDialog(){
  document.body.className="";
  dial.className="hidden";  
  focused.focus();
}

.havingFocus * {
  transition: all 0s;
  transition-delay: 20000s;
  outline: 1px solid transparent;
}
*:focus{
  transition-delay:0s;
  outline: 2px solid highlight;
}

div{
  margin:20px;
  border:1px solid black;
  padding: 20px;
  position:relative;
}
div:before{
  content:'x';
  position: absolute;
  right:10px;
  top:0px;
}

.hidden{
  display:none;
}

<input value="test123"/>
<div id="dial" class="hidden">
  <input value="in dialog" id="input"/>
  <button onclick="closeDialog()" id="new_focus">close</button>
</div>
<button onclick="openDialog()">open</button>