blob: b4b7cdf0dab882c8dd2ae45dc02d4be82b638e39 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
title: HTMLElement.inert
slug: Web/API/HTMLElement/inert
browser-compat: api.HTMLElement.inert
translation_of: Web/API/HTMLElement/inert
---
{{ APIRef("HTML DOM") }}
{{domxref("HTMLElement")}} の **`inert`** プロパティは論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。
## 構文
isInert = HTMLElement.inert;
HTMLElement.inert = true | false;
### 値
論理値で、その要素が不活性である場合は `true`、それ以外の場合はこの値は `false` になります。
<h2 id="Example">例</h3>
### HTML
```html
<div>
<label for="button1">ボタン 1</label>
<button id="button1">不活性ではありません</button>
</div>
<div inert>
<label for="button2">ボタン 2</label>
<button id="button2">不活性です</button>
</div>
```
### CSS
```css
[inert] > * {
opacity: .5;
}
```
{{ EmbedLiveSample('Example', 560, 200) }}
> **Note:** この属性は、それ自体では、ブラウザーに表示されるコンテンツは視覚的変化を与えません。上の例では、inert 属性を持つ要素の直系の子孫が半透明になるように CSS が適用されています。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- [inert のポリフィル](https://github.com/WICG/inert)
|
