inert属性を使ってフォーカスやクリックを無効化する - Qiita

Webアプリケーションを作っていると 操作を無効にしたい場面がいろいろと出てきます。 例えば API通信中は全画面にLoadingを表示し、さらに背景にフォーカス遷移を防止する。 モーダルダイアログ表示中はタブキーによって背景(親画面)へのフォーカス移動を防止する。 などのケースが存在します。 最近ほとんどのブラウザで使えるようになった inert という属性を使うことで 特定の領域内でのフォーカスやクリックの発生を無効化することができるようになります。 inert 属性を利用することでできることについては 参考のリンク先をご確認ください。 使い方 以下のように 適応したい領域のルートに inert 属性を付与します。 <div inert> <div> ここにあなたのお名前と血液型を選択して登録してください。 </div> <div> <label for="yourName">お名前: