recursal/MDN huggingface dataset:
HTMLElement: isContentEditable プロパティ
====================================

**`HTMLElement.isContentEditable`** は読み取り専用のプロパティで、論理値であり、要素の内容が編集可能な場合は `true` を返します。それ以外の場合は `false` を返します。

値
-

論理値です。

例
-

### HTML


```html
<p id="firstParagraph">編集不可能な段落</p>
<p id="secondParagraph" contenteditable="true">編集可能な段落</p>

<p id="infoText1">最初の段落を編集できますか？</p>
<p id="infoText2">2 番目の段落を編集できますか？</p>
```

### JavaScript


```js
const firstParagraph = document.getElementById("firstParagraph");
const secondParagraph = document.getElementById("secondParagraph");

const infoText1 = document.getElementById("infoText1");
const infoText2 = document.getElementById("infoText2");

infoText1.textContent += " " + firstParagraph.isContentEditable;
infoText2.textContent += " " + secondParagraph.isContentEditable;
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-iscontenteditable-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement/contentEditable`
* `contenteditable` グローバル属性
HTMLElement: click() メソッド
=========================

**`HTMLElement.click()`** メソッドは、要素のマウスクリックをシミュレートします。

`click()` を対応している要素（`<input>` など）で使用すると、要素の click イベントが発行されます。 このイベントは、文書ツリー（またはイベントチェーン）の上位の要素にバブルアップし、click イベントを発生させます。

構文
--


```js
click()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

チェックボックスの上にマウスポインターを移動させたときのマウスクリックをシミュレートします。

### HTML


```html
<form>
  <input
 type="checkbox"
 id="myCheck"
 onmouseover="myFunction()"
 onclick="alert('click event occurred')" />
</form>
```

### JavaScript


```js
// マウスオーバーで、myFunction を実行する
function myFunction() {
  document.getElementById("myCheck").click();
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-click-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 関連するイベントハンドラー
    + `Element.onclick`
    + `Element.ondblclick`
    + `Element.onauxclick`
HTMLElement: hidden プロパティ
=========================

`HTMLElement` の **`hidden`** プロパティは、この要素の `hidden` 属性の値を反映します。

値
-

この属性には 3 つの値のうち 1 つを取ります。

`true`

この要素は非表示です。

`false`

この要素は非表示ではありません。これはこの属性の既定値です。

`"until-found"`

この要素は *hidden until found* で、隠されているが、ページ内検索で見つかったり、フラグメントナビゲーションで到達したりすると表示されることを意味します。

この属性の使い方の詳細は、このプロパティが反映する HTML の `hidden` 属性のページを参照してください。

例
-

ここでは、非表示のブロックを使用して、ユーザーが珍しい要求に同意した後に表示されるお礼のメッセージを含める例を示します。

### HTML

この HTML には 2 つのパネルがあります。1 つはようこそパネルで、ユーザーに素晴らしいことを尋ね、もう一方はフォローアップパネルで、初期状態では非表示です。


```html
<div id="welcome" class="panel">
  <h1>Foobar.com へようこそ！</h1>
  <p>[OK] をクリックすると、今日は素晴らしいと同意したことになります。</p>
  <button class="button" id="okButton">OK</button>
</div>

<div id="awesome" class="panel" hidden>
  <h1>ありがとう！</h1>
  <p>今日は素晴らしいと同意してくれてありがとう！</p>
</div>
```

### CSS

コンテンツは、以下の CSS を使用してスタイル設定されます。


```css
.panel {
  font:
    16px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  border: 1px solid #22d;
  padding: 12px;
  width: 500px;
  text-align: center;
}

.button {
  font:
    22px "Open Sans",
    Helvetica,
    Arial,
    sans-serif;
  padding: 5px 36px;
}

h1 {
  margin-top: 0;
  font-size: 175%;
}
```

### JavaScript

この JavaScript はイベントリスナーを [OK] ボタンに追加し、これが "welcome" パネルを非表示にして "awesome" パネルを表示します。


```js
document.getElementById("okButton").addEventListener(
  "click",
  () => {
    document.getElementById("welcome").hidden = true;
    document.getElementById("awesome").hidden = false;
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-hidden |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `hidden` 属性
* `display`
HTMLElement: attachInternals() メソッド
===================================

**`HTMLElement.attachInternals()`** メソッドは、 `ElementInternals` オブジェクトを返します。このメソッドにより、カスタム要素が HTML フォームに参加することができるようになります。 `ElementInternals` インターフェイスは、標準的な HTML フォーム要素と同じようにこれらの要素を扱うためのユーティリティを提供し、また、要素に対してアクセシビリティオブジェクトモデルを公開します。

構文
--


```js
attachInternals()
```

### 引数

なし。

### 返値

`ElementInternals` オブジェクト。

### 例外

`NotSupportedError` `DOMException`

この要素がカスタム要素でなかった場合に発生します。

`NotSupportedError` `DOMException`

この要素の定義の一部で「内部」の機能が無効になっていた場合に発生します。

`NotSupportedError` `DOMException`

同じ要素に対してこのメソッドを 2 度呼び出したときに発生します。

例
-

次の例では、カスタムフォームに関連する要素を `HTMLElement.attachInternals` で作成する方法を示しています。そして、 `ElementInternals.form` プロパティがコンソールに出力され、 `ElementInternals` オブジェクトがあることを実証しています。


```js
class CustomCheckbox extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this.internals_ = this.attachInternals();
  }
  // …
}

window.customElements.define("custom-checkbox", CustomCheckbox);

let element = document.getElementById("custom-checkbox");
console.log(element.internals_.form);
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-attachinternals |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* More capable form controls
* Creating custom form controls with ElementInternals
HTMLElement: dir プロパティ
======================

**`HTMLElement.dir`** プロパティは、現在の要素のコンテンツのテキストを書く書字方向を取得または設定します。

要素のテキストを書く書字方向 (text writing directionality) は、テキストが向かう方向です（様々な言語体系に対応するため）。アラビア語とヘブライ語は、 RTL 書字方向を使用する典型的な言語です。

画像の `dir` プロパティを "`rtl`" に設定できます。 この場合、 HTML 属性の `title` と `alt` は、 "`rtl`" としてフォーマットされ、定義されます。

表の `dir` が "`rtl`" に設定されている場合、列の順序は右から左に配置されます。

要素の `dir` が "`auto`" に設定されている場合、要素の方向は、最初の強い書字方向文字 (strong directionality character)、または既定では親要素の書字方向に基づいて決定されます。

**メモ:** ブラウザーは、コンテンツの作成を支援するために、ユーザーが `<input>` と `<textarea>` の書字方向を変更することを許可する場合があります。 Chrome と Safari は入力フィールドのコンテキストメニューで書字方向のオプションを提供しており、 Chromium になる前の Edge は `Ctrl` + `左 Shift` と `Ctrl` + `右 Shift` のキーバインドを使用しています。 Firefox は `Ctrl`/`Cmd` + `Shift` + `X` を使用しますが、 **`dir`** 属性の値は更新しません。

値
-

以下のうちの何れかです。

* `ltr`: 左書き（左から右へ）
* `rtl`: 右書き（右から左へ）
* `auto`: 要素の内容に基づいて方向を決定しなければならないことを指定するためのものです。
例
-


```js
const parg = document.getElementById("para1");
parg.dir = "rtl";
// "para1" として識別される段落のテキストの方向を変更します
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dir |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `document.dir`
* HTML の `dir` グローバル属性
* CSS の `direction` プロパティ
* CSS の `:dir` 擬似クラス
HTMLElement: inert プロパティ
========================

`HTMLElement` の **`inert`** プロパティは、この要素の `inert` 属性の値を反映します。論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。

**メモ:** 不活性コンテンツとその子孫は、すべてのユーザーにとってフォーカスも知覚もできないので、対話要素や重要なコンテンツを `inert` 属性を持つ要素内に入れ子にしてはいけません。

値
-

論理値で、その要素が不活性である場合は `true`、それ以外の場合はこの値は `false` になります。

例
-

### 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: 0.5;
}
```

### 結果

**メモ:** この属性は、それ自体では、ブラウザーに表示されるコンテンツは視覚的変化を与えません。上の例では、inert 属性を持つ要素の直系の子孫が半透明になるように CSS が適用されています。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-inert |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* グローバル属性: `inert`
* `<dialog>`
* inert のポリフィル
* `disabled`
HTMLElement: blur() メソッド
========================

**`HTMLElement.blur()`** メソッドは、現在の要素からキーボードフォーカスを取り除きます。

構文
--


```js
blur()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

### テキスト入力からフォーカスを取り除く

#### HTML


```html
<input type="text" id="sampleText" value="サンプルテキスト" /><br /><br />
<button type="button" onclick="focusInput()">
  クリックするとフォーカスを得ます
</button>
```


#### JavaScript


```js
function focusInput() {
  const textField = document.getElementById("sampleText");

  textField.focus();

  // 入力欄から 3 秒後にフォーカスが外れる
  setTimeout(() => {
    textField.blur();
  }, 3000);
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-blur-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement.focus`
HTMLElement: hidePopover() メソッド
===============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`hidePopover()`** は `HTMLElement` インターフェイスのメソッドで、ポップオーバー要素（すなわち有効な `popover` 属性がある要素）を最上位レイヤー (en-US)から外し、`display: none` のスタイルを付けます。

`hidePopover()` が `popover` 属性のついた表示中の要素に対して呼び出された場合、`beforetoggle` イベントが発行され、続いてポップオーバーが非表示になり、それから `toggle` イベントが発行されます。要素が既に非表示であれば、エラーが発生します。

構文
--


```js
hidePopover()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

このポップオーバーが既に表示である場合に発生します。

例
-

次の例では、キーボードの特定のキーを押すことで、ポップオーバーを非表示にする機能を提供します。

最初に HTML です。


```html
<div id="mypopover">
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>
```


そして機能をつなげる JavaScript です。


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.hidePopover();
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-hidepopover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
HTMLElement: offsetTop プロパティ
============================

**`HTMLElement.offsetTop`** は読み取り専用プロパティで、現在の要素の外枠から、*最も近い位置にある*祖先要素である `offsetParent` の上枠の内側までの距離を相対的に返します。

値
-

数値です。

例
-


```js
const d = document.getElementById("div1");
const topPos = d.offsetTop;

if (topPos > 10) {
  // 要素が offsetParent から 11px 以上離れている場合の処理をここに記述
}
```

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsettop |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLElement: offsetHeight プロパティ
===============================

**`HTMLElement.offsetHeight`** は読み取り専用プロパティで、垂直パディングや境界線を含む要素の高さを整数として返します。

通常、`offsetHeight` は、境界線、パディング、水平スクロールバー（レンダリングされている場合）を含む、要素の CSS における高さのピクセル単位の計測値です。 `::before` や `::after` などの擬似要素の高さは含まれません。 文書の body オブジェクトの場合、計測値には、要素の CSS における高さではなく、線形コンテンツの高さの合計が含まれます。 他の線形コンテンツの下に広がる浮動要素は無視されます。

（例えば、要素またはその祖先のいずれかで `style.display` を `"none"` に設定することにより）要素が非表示の場合は、`0` が返されます。

**メモ:** このプロパティは、値を整数に丸めます。 小数値が必要な場合は、`element.getBoundingClientRect()` を使用してください。

値
-

数値です。

例
-

![大きなパディング、境界、マージンを持つ要素の例です。offsetHeightは、パディングと境界を記載し、マージンを除いた要素のレイアウト高さです。](/ja/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

上のサンプル画像は、スクロールバーにより、ウィンドウに収まる場合の `offsetHeight` を示しています。 ただし、スクロールできない要素には、目に見えるコンテンツよりもはるかに大きな `offsetHeight` 値が含まれる場合があります。 これらの要素は通常、スクロール可能な要素内に含まれています。 その結果、これらの非スクロール要素は、スクロール可能なコンテナの `scrollTop` の設定に応じて、完全にまたは部分的に非表示になる場合があります。

仕様書
---

| Specification |
| --- |
| CSSOM View Module # dom-htmlelement-offsetheight |

### メモ

`offsetHeight` は、MSIE によって最初に導入された DHTML オブジェクトモデルのプロパティです。 要素の物理的/グラフィカルな寸法、または要素の境界ボックスの高さ (border-box height) と呼ばれることもあります。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `Element.clientHeight`
* `Element.scrollHeight`
* `HTMLElement.offsetWidth`
* 要素の寸法の決定
* MSDN 要素の寸法と位置の測定（英語）
HTMLElement: showPopover() メソッド
===============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`showPopover()`** は `HTMLElement` インターフェイスのメソッドで、ポップオーバー要素（すなわち有効な `popover` 属性がある要素）を最上位レイヤー (en-US)に追加することで表示します。

`showPopover()` が `popover` 属性のついた現在非表示の要素に対して呼び出された場合、`beforetoggle` イベントが発行され、続いてポップオーバーが表示され、それから `toggle` イベントが発行されます。要素が既に表示中であれば、エラーが発生します。

構文
--


```js
showPopover()
```

### 引数

なし。

### 返値

なし (`undefined`)。

### 例外

`InvalidStateError` `DOMException`

このポップオーバーが既に表示中の場合に発生します。

例
-

次の例では、キーボードの特定のキーを押すことで、ポップオーバーを表示する機能を提供します。

最初に HTML です。


```html
<div id="mypopover">
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>
```


そして機能をつなげる JavaScript です。


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.showPopover();
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-showpopover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
HTMLElement: inputMode プロパティ
============================

`HTMLElement` の **`inputMode`** プロパティは、この要素の `inputmode` 属性の値を反映します。

要素やコンテンツの編集中にユーザーが入力する可能性のあるデータの種類を示すヒントを提供するものです。これにより、ブラウザーは適切な仮想キーボードを表示することができます。

これは主に `<input>` 要素で使用されますが、どの要素でも `contenteditable` モードであれば使用できます。

値
-

この属性は、以下の値の何れかを取ります。

`decimal`

実数の入力キーボードで、数字とユーザーのロケールの小数点（普通は `.` または `,`）を含みます。

`email`

 メールアドレスの入力に最適化された仮想キーボードです。
 通常、`@` 文字やその他の最適化が行われいます。


`none`

仮想キーボードはありません。ページが自分自身でキーボード入力制御を実装している場合に使用します。

`numeric`

 0 ～ 9 の数字だけが必要な数値入力キーボードです。
 端末によって、マイナスキーがある場合とない場合があります。


`search`

 検索入力に最適化された仮想キーボードです。
 例えば、リターン/送信キーは「検索」と表示されているかもしれません。


`tel`

電話機のキーパッド入力で、0 ～ 9 の数字、アスタリスク (`\*`)、ナンバー (`#`) キーを含めるために使用します。

`text`

ユーザーの現在のロケールに対応した標準入力キーボードです。

`url`

 URL の入力に最適化されたキーパッドです。
 これは例えば、`/` キーがより目立つように持つことができるかもしれません。


この属性の使い方は、このプロパティを反映した HTML の `inputmode` 属性のページを参照してください。

例
-

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-inputmode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* inputmode 属性
HTMLElement: dragleave イベント
===========================

`dragleave` イベントは、ドラッグしている要素や選択中のテキストが妥当なドロップターゲットを離れたときに発生します。

このイベントはキャンセル不可です。

構文
--

このイベント名を `addEventListener()` のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。


```js
addEventListener("dragleave", (event) => {});

ondragleave = (event) => {};
```

イベント型
-----

`DragEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEvent

DragEventイベントプロパティ
---------

*以下に挙げたプロパティに加えて、親である `Event` から継承したプロパティもあります。*

`DragEvent.dataTransfer` 読取専用 

ドラッグ＆ドロップ操作の間に転送されるデータです。

例
-

### dragleave 時にドロップゾーンのスタイルをリセット

この例では、コンテナーの中にドラッグ可能な要素を入れています。要素を掴んで、他のコンテナーの上にドラッグし、そして放してみましょう。

ドラッグ可能な要素がコンテナーの上にある間は、もう一方のコンテナーの背景を紫色にし、ドラッグ可能な要素がコンテナーの上にドロップされる可能性があることを知らせます。 `dragleave` イベントを待ち受けて、ドラッグ可能な要素がコンテナーからドラッグされたときにコンテナーの背景をリセットするようにします。

ドラッグ＆ドロップの完全な例については、`drag` イベントのページを参照してください。

#### HTML


```html
<div class="dropzone">
  <div id="draggable" draggable="true">この div はドラッグ可</div>
</div>
<div class="dropzone" id="droptarget"></div>
```


#### CSS


```css
body {
  /\* 例でユーザーがテキストを選択するのを防ぐ \*/
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

.dropzone {
  width: 200px;
  height: 20px;
  background: blueviolet;
  margin: 10px;
  padding: 10px;
}

.dropzone.dragover {
  background-color: purple;
}
```


#### JavaScript


```js
const target = document.getElementById("droptarget");
target.addEventListener("dragenter", (event) => {
  // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する。
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.add("dragover");
  }
});

target.addEventListener("dragleave", (event) => {
  // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする
  if (event.target.classList.contains("dropzone")) {
    event.target.classList.remove("dragover");
  }
});
```


#### 例

仕様書
---

| Specification |
| --- |
| HTML Standard # ix-handler-ondragleave |
| HTML Standard # event-dnd-dragleave |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* その他のドラッグ＆ドロップイベント:
    + `drag`
    + `dragstart`
    + `dragend`
    + `dragover`
    + `dragenter`
    + `drop`
* 他を対象としたこのイベント:
    + `Window`: `dragleave` イベント
    + `Document`: `dragleave` イベント
    + `SVGElement`: `dragleave` イベント
HTMLElement: beforetoggle イベント
==============================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`beforetoggle`** は `HTMLElement` インターフェイスのイベントで、ポップオーバー要素（すなわち有効な `popover` 属性がある要素）において、表示または非表示になる直前に発行されます。

* ポップオーバーが非表示状態から表示状態に遷移した場合、`event.oldState` プロパティには `closed` が、`event.newState` プロパティには `open` が設定されます。
* ポップオーバーが表示状態から非表示状態に遷移した場合、 `event.oldState` は `open` に、 `event.newState` は `closed` になります。
構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("beforetoggle", (event) => {});

onbeforetoggle = (event) => {};
```

イベント型
-----

`ToggleEvent` です。`Event` から継承しています。

Event

ToggleEvent例
-

### 基本的な例


```js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});
```

### トグルイベントの合体に関するメモ

`beforetoggle` イベントが合体していることを特筆に値するでしょう。イベントループが循環する前に複数の `beforetoggle` イベントが発行された場合、単一のイベントしか発行されないということです。

例えば次のようになります。


```js
popover.addEventListener("beforetoggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `beforetoggle` は 1 回しか発行されない
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-beforetoggle |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
* 関連イベント: `toggle`
HTMLElement: togglePopover() メソッド
=================================

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
**Experimental:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`togglePopover()`** は `HTMLElement` インターフェイスのメソッドで、ポップオーバー要素（すなわち有効な `popover` 属性がある要素）の非表示状態と表示状態をトグル切り替えします。

`togglePopover()` が `popover` 属性の付いた要素に対して呼び出されると、次のようになります。

1. `beforetoggle` イベントが発行されます。
2. ポップオーバーが非表示状態と表示状態の間で切り替わります。
    1. もともと表示状態であった場合は、非表示状態に切り替わります。
    2. もともと非表示状態であった場合は、表示状態に切り替わります。
3. `toggle` イベントが発行されます。
構文
--


```js
togglePopover(force)
```

### 引数

`force`

論理値で、`togglePopover()` を `showPopover()` または `hidePopover()` のように動作させます。ただし、そのポップオーバーが既にその状態にあっても、例外が発生しない点が異なります。

* `true` に設定された場合、ポップオーバーは非表示だった場合に表示されます。表示されていた場合は、何も起こりません。
* `false` に設定された場合、ポップオーバーは表示されていた場合に非表示になります。非表示になっていた場合は、何も起こりません。

### 返値

なし (`undefined`)。

例
-

次の例では、キーボードの特定のキーを押すことで、ポップオーバーのオン・オフを切り替える機能を提供します。

最初に HTML です。


```html
<div id="mypopover">
  <h2>Help!</h2>

  <p>You can use the following commands to control the app</p>

  <ul>
    <li>Press <ins>C</ins> to order cheese</li>
    <li>Press <ins>T</ins> to order tofu</li>
    <li>Press <ins>B</ins> to order bacon</li>
    <hr />
    <li>Say "Service" to summon the robot waiter to take your order</li>
    <li>Say "Escape" to engage the ejector seat</li>
  </ul>
</div>
```


そして機能をつなげる JavaScript です。


```js
const popover = document.getElementById("mypopover");

document.addEventListener("keydown", (event) => {
  if (event.key === "h") {
    popover.togglePopover();
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-togglepopover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* ポップオーバー API
HTMLElement: enterKeyHint プロパティ
===============================

**`enterKeyHint`** プロパティは、仮想キーボードの Enter キーに表示するアクションラベル（またはアイコン）を定義する列挙型のプロパティです。これは HTML の `enterkeyhint` グローバル属性を反映し、以下の値のみを文字列として受け入れることができる、列挙型のプロパティです。

* `'enter'`: 通常は改行を挿入することを示します。
* `'done'`: 通常はこれ以上入力するものがなく、インプットメソッドエディター (IME) が閉じることを示します。
* `'go'`: 通常、ユーザーが入力したテキストのターゲットに移動することを意味します。
* `'next'`: 通常、ユーザーを次のテキストを受け付けるフィールドに移動させる。
* `'previous'`: 通常、テキストを受け入れる前のフィールドにユーザーを移動させます。
* `'search'`: 通常、ユーザーが入力したテキストを検索した結果に移動します。
* `'send'`: 通常、テキストをターゲットに送ります。

`enterKeyHint` の値が指定されていない場合、あるいは許可されている値とは異なる値が設定されている場合は、空の文字列を返します。

例
-

仮想キーボードに、 Enter キーのラベルをどうするかのヒントを与えます（OS やユーザーの言語に応じて、`送信`または`検索`と表示されます）。


```js
const send = document.getElementById("sendInput");
const search = document.getElementById("searchInput");

send.enterKeyHint = "send";
search.enterKeyHint = "search";
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-enterkeyhint |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* HTML の `enterkeyhint` グローバル属性
HTMLElement: innerText プロパティ
============================

**`innerText`** は `HTMLElement` のプロパティで、ノードとその子孫の「レンダリングされている」テキスト内容を示します。

 ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。
 セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を `<br>` 要素に変換します。

**メモ:** `innerText` は `Node.textContent` と混同しやすいのですが、両者には重要な違いがあります。基本的に `innerText` はテキストがレンダリングされる表示を意識しますが、 `textContent` はそうではありません。

値
-

文字列で、要素の表示されたテキストの内容を表します。

要素自身が表示されないとき（例えば、文書から切り離されたり、表示から隠されたりしている場合）、返値は `Node.textContent` プロパティと同じ値になります。

**警告:** `innerText` をノードに設定すると、そのノードの *すべての* 子ノードが取り除かれ、指定した文字列値のテキストノード 1 つに置き換えられます。

例
-

この例では `innerText` と `Node.textContent` を比較しています。 `innerText` が `<br>` 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。

### HTML


```html
<h3>元の要素:</h3>
<p id="source">
  <style>
 #source {
 color: red;
 }
 #text {
 text-transform: uppercase;
 }
 </style>
  <span id="text">
    このテキストが<br />
    どう扱われるか<br />
    下で見てみてください。
  </span>
  <span style="display:none">隠しテキスト</span>
</p>
<h3>textContent の結果:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>innerText の結果:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>
```

### JavaScript


```js
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");

textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # the-innertext-idl-attribute |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement: contentEditable プロパティ
==================================

**`contentEditable`** は `HTMLElement` インターフェイスのプロパティで、要素が編集可能かどうかを指定します。

これは列挙属性で、次の値を設定できます。

* '`true`' は、要素の内容が編集可能 (`contenteditable`) であることを示します。
* '`false`' は、要素が編集できないことを示します。
* '`inherit`' は、要素がその親の編集可能状態を継承することを示します。

`HTMLElement.isContentEditable` プロパティを使用すると、このプロパティの計算済みの論理値をテストできます。

値
-

文字列。

仕様書
---

| Specification |
| --- |
| HTML Standard # contenteditable |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `HTMLElement.isContentEditable`
* `contenteditable` グローバル属性