我目前有一个<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">×</button>
</dialog>
正如您所看到的,当对话框打开时,对话框中按钮的背景将应用:focus
样式,这表明它已被聚焦。
我的问题是:为什么会这样?我期望的行为是打开对话框,并且在打开对话框时按钮不聚焦。我知道我可以不经意地.blur()
关闭按钮,但这感觉就像我只是“隐藏”问题,而不是解决真正导致它的事情。
- 注意:* 此问题存在于最新版本的Google Chrome(版本81.0.4044.138)中
3条答案
按热度按时间yh2wf1be1#
这似乎是标准中定义的默认行为,以便在呈现模态子树时聚焦模态子树,来自HTML live标准:
1.为受试者运行对话框聚焦步骤。
如果你想保持这样,并防止按钮焦点只是触发按钮上的
blur()
事件,我试图使用inert
和autofocus
属性,但它们似乎不起作用,所以我认为你必须坚持使用.blur()
实现:wmtdaxz32#
上面的快照是在打开对话框后从
close-btn
的style
部分捕获的(浏览器的developer tools
/只需按F12
键即可打开)。浏览器的Webkit在打开对话框时显式添加
outline
属性。outline属性在使用TAB键(或等效键)导航Web文档时为具有“焦点”的链接提供视觉反馈。这对于那些不能使用鼠标或有视力障碍的人特别有用。如果您删除了大纲,您将使这些人无法访问您的网站。
但是如果你仍然想删除它,那么使用下面的代码。
希望这对你有帮助
toiithl63#
您可以简单地在某个任意元素上执行
focus()
,然后执行immeridateblur()
。例如:
在上面的例子中,我选择聚焦和模糊对话框元素本身-这足以抵消默认的自动聚焦行为。适用于基于Chromium的浏览器。