グローバル属性~“inert”属性

“inert”属性について

“inert”属性は要素を不活性化する属性です。

“inert”属性が指定された要素に加えて子孫要素も不活性化されます。

不活性化された要素は以下のような状態となります。

• “pointer-events”プロパティの値が“none”である場合と同様にポインタ・イベントは無効化されます。
• “user-select”プロパティの値が“none”である場合と同様にテキストは選択できなくなります。
• 要素が編集可能な場合は編集できなくなります。
• ユーザー・エージェントはページ内検索でその要素を無視することができます。

“inert”属性はモーダル・ダイアログやサイドメニューを開いた時にそれ以外の部分を操作できなくしたり、操作できるアイテムのないカルーセルUIをクリックできなくしたりするために使用することができます。

指定できる値

“inert”属性は真偽属性であり、属性値は省略できます。

サンプルコード

<form method="post" action="sample-inputtag2.php" target="_blank" inert>

<fieldset>

<p><label>猫の名前：<input type="text" name="sample01"></label></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

猫の名前：

送信する