使用 HTML 属性禁用 showModal 自动对焦

Question

据我所知，showModal() 方法运行以下步骤，最终在 HTML 对话框中聚焦元素（强调我的）：

1. 让 subject 为调用该方法的对话框元素。

2. 如果 subject 已经有一个 open 属性，那么抛出一个"InvalidStateError" DOMException.

3. 如果 subject 不是 connected，则抛出一个 "InvalidStateError" DOMException`.

4. 为主题添加开放属性，其值为空字符串。

5. 将对话框设置为居中对齐模式。

6. 让主题的node document成为 被模态阻止 对话框主题。

7. 如果主题的node document的top layer还没有 contain 主题，然后 add 主题 主题的node document的top layer。

8. 为主题运行dialog focusing steps。

所以最后一步8 将在对话框中运行以下dialog focusing steps。根据我的理解（这可能是完全错误的），规范的对话框聚焦步骤部分中的这三个步骤指定只有在元素不是惰性且可自动聚焦时才应该聚焦元素：

1. 如果主题是inert，则返回。

2. 让 control 成为主题的第一个后代元素，在 tree order 中，不是 inert 并且指定了 autofocus 属性。

   如果没有，那么让 control 成为第一个非惰性后代 subject 的元素，按树形顺序排列。

   如果两者都没有，那就让控制成为主题。

3. 运行focusing steps 进行控制。

   ...

所以，对我来说，好像我下面的按钮（参见 sn-p）具有 inert 属性或者不是自动聚焦的，那么当对话框打开时它不应该聚焦。但是，当我尝试同时应用这两个属性时，它仍然会被聚焦。

---

尝试使用 inert 布尔属性（我认为这会使对话框聚焦步骤返回上面，因此不执行聚焦）：

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" inert="inert">&times;</button>
</dialog>

尝试将 autofocus 布尔属性设置为 false（我相信这就是您将其设置为 false 的方式，我也尝试过 autofocus="false" 也不起作用）：

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" autofocus="">&times;</button>
</dialog>

由于这两个都不起作用，我搜索了 SO 并找到了 this answer，这表明我也可以使用 tabindex="-1"，但这也不起作用。

我知道一旦按钮聚焦using .blur()，我可以模糊按钮，但我的具体问题是：

1. 为什么上面的两个小提琴不禁用按钮自动聚焦？
2. 是否有某种 HTML 属性可以用来阻止我的按钮获得焦点？

Answer 1

无法聚焦已禁用的元素。您可以将disabled 属性添加到close-btn。

但是，不能点击禁用的元素。将 onclick 属性添加到open-btn。将onclick 设置为：setTimeout(function(){document.getElementById('close-btn').disabled = false})。这只是在单击按钮后 1 毫秒启用按钮。需要超时，以便在打开对话框之前不会启用close-btn。

如果对话框重新打开，按钮会自动获得焦点。我们可以向close-btn 添加另一个 onclick 属性。将onclick 上的close.btn 设置为：this.disabled = true。这会在单击 close-btn 时禁用它。

最终结果：

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" onclick='setTimeout(function(){document.getElementById("close-btn").disabled = false})'>Open</button>
<dialog id="dialog">
  <button disabled id="close-btn" inert="inert" onclick='this.disabled = true'>&times;</button>
</dialog>