禁用使用HTML属性的showModal自动聚焦

Question

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

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

2. 如果主题已经有一个打开的属性，则抛出一个"；InvalidStateError"；D例外。

3. 如果主题未连接，则抛出"InvalidStateError"；D异常`。

4. 向subject添加一个open属性，该属性的值为空字符串。

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

6. 让主题的节点文档被模态阻塞对话框主题。

7. 如果主题的节点文档的顶部层尚未包含主题，然后将主题添加到主题的节点文档的顶部层

8. 运行主题的对话框聚焦步骤

因此，最后一个步骤8将运行以下对话框，将重点放在对话框上。根据我的理解(这可能是完全错误的(，规范对话框聚焦步骤部分的这三个步骤规定，只有当元素不是惰性的并且可以自动聚焦时，才应该聚焦元素：

1. 如果主题是惰性的，则返回。

2. 让控件是主题的第一个子元素，按树顺序，它不是惰性的，并指定了自动聚焦属性。

   如果没有，那么让控件成为第一个非惰性子体主题的元素，按树顺序排列。

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

3. 运行聚焦步骤进行控制。

所以，对我来说，如果我下面的按钮(见片段(具有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并找到了这个答案，这表明我可能也可以使用tabindex="-1"，但它也不起作用。

我知道一旦使用.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属性。将close.btn上的onclick设置为：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>

Answer 2

也许这会奏效，它对我来说是

由于selectorElement是我们希望在聚焦时不显示轮廓的实际元素

selectorElement:focus-visible {
outline: none;
}