据我所知,
尝试使用
尝试将
showModal()
方法执行以下步骤,最终将焦点放在 HTML 对话框内的元素上(强调我的)。
因此,最后一步
设subject为调用该方法的对话框元素。
如果subject已经有一个打开属性,则抛出"InvalidStateError"DOMException异常。
如果subject未连接,则抛出"InvalidStateError"DOMException异常。
向subject添加一个值为空字符串的打开属性。
将对话框设置为居中对齐模式。
使subject的节点文档被模态对话框subject阻塞。
运行subject的对话框聚焦步骤。
8
将在对话框上运行以下对话框聚焦步骤。从我的理解来看(可能完全错误),规范中的对话框聚焦步骤部分指定了这三个步骤,即仅当元素不是惰性的且可以自动聚焦时,才应聚焦该元素。
因此,对我来说,如果我的按钮(请参见片段)具有“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">×</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="">×</button>
</dialog>
在这两种方法都无法生效的情况下,我在SO上找到了这个答案,它建议我也可以使用tabindex="-1"
,但这也没有起作用。
我知道我可以在按钮被聚焦后使用.blur()
来模糊按钮,但我的问题具体是:
- 为什么上面的两个fiddles不能禁止自动聚焦按钮?
- 是否有某种HTML属性可以阻止我的按钮被聚焦?