ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA

HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert

[ics-media]

フォームやハンバーガーメニュー等で役立つinert属性を解説しました。

[field_combat]

これ便利だな

[aceraceae]

便利かも

[forestk]

最初のサンプルで `inert` した後でも `linkElement.click()` するとクリックできてしまうのだけど、これを防ぐ方法はないものか。

[manaten]

便利そう。cssプロパティで欲しくなるけど

[cpw]

進化してるなー

[mayumayu_nimolove]

レイヤーの一番上に半透明のBG置くだけからの進化

[nakag0711]

普通非活性はinactiveの訳だと思うが、inertも同じになっちゃうなこれは。htmlにactiveとかactivateという用語はあったっけ。ちなみにenable/disableを活性/非活性って言う人いるけど有効/無効とした方がいいと思う

[homarara]

ダブルクリック対策で使えるかな？