在 Firefox 上禁用时按钮不会失去焦点

【问题标题】：Button don't lose focus when disabled on Firefox在 Firefox 上禁用时按钮不会失去焦点
【发布时间】：2023-04-05 08:22:01
【问题描述】：

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

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

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

【问题讨论】：

请在禁用时添加此样式。按钮 { 指针事件：无； }

标签： javascript html css firefox mozilla

【解决方案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);
  });
}

【讨论】：