按钮在火狐浏览器上禁用时不会失去焦点

Question

当按钮被聚焦然后被禁用时，焦点仍然在按钮上。

它使浏览器对键盘事件没有响应。

Chrome上不会出现问题，因为所有禁用的按钮都会自动失去焦点。全球听众似乎有效，但也许你有更好的解决方案。

window.addEventListener('click', ev => {
if (ev.target instanceof HTMLButtonElement && ev.target.disabled) {
ev.target.blur();
}
})

https://codepen.io/magdalena-chmura/pen/abOrERz?editors=1010

Answer 1

我知道它已经很晚了，你可能不再需要它了，但这里有一些工作代码可以在所有可见的按钮上修复它。你只需要在适当的时候调用这个函数：

initButtonObservers() {
this.element.nativeElement.querySelectorAll('button').forEach((button) => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === "disabled" && mutation.target instanceof HTMLButtonElement) {
mutation.target.blur();
}
});
});
const config: MutationObserverInit = { attributes: true };
observer.observe(button, config);
});
}