HTML 打开时对话框聚焦按钮元素

Question

我目前有一个 <dialog> 正在通过 JS 打开。出于演示目的，我的对话框中只有一个 <button> 元素。

我的问题是，当我使用 .showModal() 打开对话框时，模态框内的按钮出于某种原因获得了焦点。请参阅下面的问题示例：

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
});

document.querySelector("#close-btn").addEventListener('click', () => {
  dialog.close();
});

#close-btn:focus {
  background: red;
}

<button id="open-btn">Open</button>
<dialog id="dialog">
  <button id="close-btn">&times;</button>
</dialog>

如您所见，打开对话框时，对话框中按钮的背景应用了 :focus 样式，表明它已获得焦点。

我的问题是：为什么会这样？我的预期行为是打开对话框并且在打开对话框时按钮不聚焦。我知道我可以通过编程 .blur() 关闭按钮，但这感觉就像我只是 "hiding" 问题而不是解决实际导致它的问题。

注意：此问题存在于最新版本 Google Chrome（版本 81.0.4044.138）

Answer 1

以上快照是在打开对话框后从 close-btn 的 style 部分捕获的（browser/simply 的 developer tools 按 F12 键打开它）。

浏览器的Webkit在打开对话框时显式添加outline属性

outline 属性在使用 TAB 键（或等效键）浏览 Web 文档时为具有 "focus" 的链接提供视觉反馈。这对于不能使用鼠标或有视力障碍的人特别有用。如果您删除大纲，这些人将无法访问您的网站。

但如果您仍想删除它，请使用以下代码。

#close-btn {
  background: red;
  outline: none;
}

希望对您有所帮助

Answer 2

这似乎是标准中定义的默认行为，用于在渲染后聚焦模态子树，来自 HTML live standard:

Run the dialog focusing steps for subject.

如果你想保持这样并防止按钮聚焦只需触发按钮上的 blur() 事件，我尝试使用 inert and autofocus 属性但它们似乎不起作用，所以我认为您必须坚持 .blur() 实施：

const dialog = document.querySelector("#dialog");
document.querySelector("#open-btn").addEventListener('click', () => {
  dialog.showModal();
  document.getElementById('close-btn').blur();
});

document.querySelector("#close-btn").addEventListener('click', () => {
  dialog.close();
});

#close-btn:focus {
  background: red;
}

<button id="open-btn">Open</button>
<dialog id="dialog">
  <button id="close-btn" inert="false" autofocus="false">&times;</button>
</dialog>

HTML 打开时对话框聚焦按钮元素

HTML dialog focusing button element when opened

html

javascript

google-chrome

focus