在 Firefox 上禁用時按鈕不會失去焦點

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

我知道現在已經很晚了，可能您不再需要它了，但是這里有工作代碼可以在所有可見按鈕上修復它。 您只需要在適當的時候調用這個 function：

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);
  });
}