🦝

一時的にユーザー操作を不可にする : JavaScript

2023/07/17に公開

完全なるメモです。
以下の要件を担保できるようです。

  • マウス・タッチ操作の無効化
  • キーボード操作の無効化
  • タブフォーカスの無効化
  • 読み上げの無効化
// lock
document.querySelector("body").inert = true;

// unlock
document.querySelector("body").inert = false;

ロック中の表示処理はCSSだけでできそう

body[inert]{
  filter: blur(5px);
}

Discussion