recursal/MDN huggingface dataset:
PointerEvent.twist
==================

**`twist`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインター（ペンやスタイラスなど）の主軸を中心とした時計回りの回転を度数で表します。

値
-

トランスデューサー（ポインター）に適用される、ねじれの量を度数で表す `long` 値。 値の範囲は `0` から `359` です。 `twist` を報告しない機器の場合、値は `0` です。

例
-

`pointerdown` イベントが発生すると、イベントの `twist` プロパティの値に応じてさまざまな関数が呼び出されます。


```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    if (event.twist === 0) {
      // ねじれなし
      process\_no\_twist(event);
    } else {
      // デフォルト
      process\_twist(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-twist |

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

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

関連情報
----

* `Touch.force`
PointerEvent.pointerId
======================

**`pointerId`** `PointerEvent` インターフェイスの読み取り専用プロパティで、特定のポインターのイベントに割り当てられた識別子です。 識別子は一意であり、他のすべてのアクティブポインターのイベントの識別子と異なります。 値はランダムに生成される可能性があるため、特定の意味を伝えることは保証されません。

値
-

数値です。

例
-

次のコードスニペットは、以前に保存された `pointerId` と、発生したばかりの `pointerdown` イベントのものとを比較します。


```js
let id; // これが以前に保存された pointerId であると仮定しましょう

target.addEventListener(
  "pointerdown",
  (event) => {
    // キャッシュされた前のイベントの ID を現在の
    // イベントの ID と比較し、それに応じて処理する
    if (id === event.pointerId) process\_event(event);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-pointerid |

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

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

**`tangentialPressure`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインター入力の正規化された接線方向の圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）を表します。

値
-

ポインター入力の正規化された接線方向の圧力を表す `-1` から `1` の範囲の `float` 値。ここで、`0` はコントロールの中立位置です。

ハードウェアによっては、`0` から `1` の範囲の正の値しかサポートしない場合があることに注意してください。 接線方向の圧力をサポートしないハードウェアの場合、値は `0` になります。

例
-

このスニペットでは、 `pointerdown` イベントが発生すると、イベントの `tangentialPressure` プロパティの値に応じてさまざまな関数が呼び出されます。


```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    if (event.tangentialPressure === 0) {
      // 圧力なし
      process\_no\_tanPressure(event);
    } else if (event.tangentialPressure === 1) {
      // 最大圧力
      process\_max\_tanPressure(event);
    } else {
      // デフォルト
      process\_tanPressure(event);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-tangentialpressure |

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

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

関連情報
----

* `Touch.force`
PointerEvent.pointerType
========================

**`pointerType`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、特定のポインターイベントを引き起こした機器の種類（マウス、ペン、またはタッチ）を示します。

値
-

このイベントのポインターの種類です。対応している値は以下の文字列です。

`"mouse"`

このイベントはマウス機器によって生成されました。

`"pen"`

このイベントはペン機器またはスタイラス機器によって生成されました。

`"touch"`

このイベントは指などのタッチによって生成されました。

機器の種類がブラウザーで検出できない場合、値は空の文字列 (`""`) になります。 ブラウザーが上記以外のポインター機器の種類に対応している場合は、他の種類の機器と名前が競合しないように、値に *ベンダー接頭辞* をつける必要があります。

例
-

この例は、`pointerType` プロパティの値を使用して適切なポインターの種類の処理関数を呼び出す方法を示しています。


```js
targetElement.addEventListener(
  "pointerdown",
  (event) => {
    // 適切なポインターの種類のハンドラーを呼び出す
    switch (event.pointerType) {
      case "mouse":
        process\_pointer\_mouse(event);
        break;
      case "pen":
        process\_pointer\_pen(event);
        break;
      case "touch":
        process\_pointer\_touch(event);
        break;
      default:
        console.log(`pointerType ${event.pointerType} には対応していません`);
    }
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-pointertype |

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

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

**`tiltY`** は `PointerEvent` インターフェイスの読み取り専用プロパティで、ポインターの *X-Z 平面*と画面の間の角度（度単位）です。 このプロパティは通常、ペン/スタイラス型のポインターのみ役立ちます。

このプロパティの説明については、仕様の図 3 を参照してください。

値
-

ポインター（スタイラス）の X-Z 平面と画面の間の角度（度単位）。 値の範囲は `-90` から `90` です。 ここで、正の値はユーザーの方への傾きです。 このプロパティをサポートしていないデバイスの場合、値は `0` です。

例
-

この例は、`tiltX` プロパティおよび `tiltY` プロパティへの簡単なアクセスを示しています。


```js
someElement.addEventListener(
  "pointerdown",
  (event) => {
    process\_tilt(event.tiltX, event.tiltY);
  },
  false,
);
```

仕様書
---

| Specification |
| --- |
| Pointer Events # dom-pointerevent-tilty |

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

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

**`expirationTime`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連付けられたサブスクリプションの有効期限を `DOMHighResTimeStamp` で返します。存在しなければ `null` を返します。

値
-

`DOMHighResTimeStamp` です。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-expirationtime |

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

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

**`options`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、サブスクリプションを作成するために用いられたオプションが入ったオブジェクトです｡

値
-

以下の値が入った読み取り専用の `PushSubscriptionOptions` オブジェクトです。

`userVisibleOnly`

論理値で、プッシュサブスクリプションがユーザーに見える効果を持つメッセージのみに使われるかどうかを表します。

`applicationServerKey`

プッシュサーバーがプッシュサーバーを通じてクライアントアプリケーションにメッセージを送信するのに用いる公開鍵です。この値は、アプリケーションサーバーで生成された署名用鍵ペアの一部であり、P-256 曲線上での楕円曲線デジタル署名 (ECDSA) で利用可能です。

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-options |

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

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

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`subscriptionId`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、このプッシュサブスクリプションに関連するサブスクリプション ID が入った文字列を返します。

**警告:** この機能の代わりに、同じインターフェイスの `PushSubscription.endPoint` プロパティを使用してください。

値
-

文字列です。

仕様書
---

この機能は、プッシュ API の仕様書から削除されました。もう標準化を目指していません。

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PushSubscription: getKey() メソッド
===============================

`getKey()` は `PushSubscription` インターフェイスのメソッドで、サーバーに送信されてプッシュメッセージのデータを暗号化するために使用される、クライアントの公開鍵を表す `ArrayBuffer` を返します。

構文
--


```js
getKey(name)
```

### 引数

`method`

クライアントの公開鍵の生成に使用される暗号化方式です。取りうる値は以下の通りです。

`p256dh`

P-256 曲線（つまり、NIST secp256r1 楕円曲線）の楕円曲線ディフィー・ヘルマン公開鍵です。結果として得られるキーは、ANSI X9.62 フォーマットで非圧縮ポイントとなります。

`auth`

Message Encryption for Web Push で記述されている認証秘密です。


### 返値

`ArrayBuffer`。

例
-


```js
reg.pushManager.getSubscription().then((subscription) => {
  // プッシュメッセージからサブスクライブ / アンサブスクライブ
  // する任意の UI を有効にする

  subBtn.disabled = false;

  if (!subscription) {
    console.log("Not yet subscribed to Push");
    // プッシュを購読していない場合、ユーザーがプッシュできるように
    // UI を設定する。
    return;
  }

  // プッシュメッセージを購読していることを表示するように
  // UI を設定する。
  subBtn.textContent = "Unsubscribe from Push Messaging";
  isPushEnabled = true;

  // 購読ステータスのための UI 要素の設定を含んで状態を初期化し、
  // プッシュ経由でサブスクライバーを更新する。
  const endpoint = subscription.endpoint;
  const key = subscription.getKey("p256dh");
  const auth = subscription.getKey("auth");

  // ...
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-getkey |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
PushSubscription: unsubscribe() メソッド
====================================

`unsubscribe()` は `PushSubscription` インターフェイスのメソッドで、現在のサブスクリプションから脱退に成功したときに論理値で解決される `Promise` を返します。

構文
--


```js
unsubscribe()
```

### 引数

なし。

### 返値

現在のサブスクリプションから脱退に成功したときに論理値で解決される `Promise` です。

例
-


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    subscription
      .unsubscribe()
      .then((successful) => {
        // 登録脱退が成功
      })
      .catch((e) => {
        // 登録脱退が失敗
      });
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-unsubscribe |

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

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

関連項目
----

* `PushManager.getSubscription`
PushSubscription: toJSON() メソッド
===============================

**`toJSON()`** は `PushSubscription` インターフェイスの メソッドで、標準のシリアライザーです。これは、このサブスクリプションのプロパティの JSON 表現を返す、便利なショートカットを提供します。

構文
--


```js
toJSON()
```

### 引数

なし。

### 返値

JSON オブジェクトです。現在は、`endpoint` メンバーとしてサブスクリプションエンドポイントのみを含みます。

例
-


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const mySubscription = subscription.toJSON();
    // サブスクリプションの詳細を使用して何かを実行する
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-tojson |

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

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

**`endpoint`** は `PushSubscription` インターフェイスの読み取り専用プロパティで、プッシュサブスクリプションに関連するエンドポイントの入った文字列を返します。

エンドポイントはカスタム URL の形式を取り、プッシュサービスに加入している特定のサービスワーカーにプッシュメッセージを送信するために使用するプッシュサーバーを指します。このため、他者がこれをハイジャックしてプッシュ機能を乱用しないように、エンドポイントは秘匿しておくことが大切です。

値
-

文字列です。

例
-


```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.subscribe({ userVisibleOnly: true }).then((subscription) => {
    console.log(subscription.endpoint);

    // この時点で、サブスクリプションエンドポイントをサーバーに送信し、
    // 保存した後、後でプッシュメッセージを送信するために使用します。
  });
});
```

仕様書
---

| Specification |
| --- |
| Push API # dom-pushsubscription-endpoint |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
要素の寸法の決定
========

要素の幅と高さを決定するために見ることがあるプロパティはいくつかあり、どれがニーズに適しているかを特定するのが難しい場合があります。この記事は、その決定に役立つように作られています。これらのプロパティはすべて読み取り専用であることに注意してください。要素の幅と高さを設定する場合は、 `width` と `height`、またはそれをオーバーライドする `min-width` と `max-width`、および `min-height` と `max-height` プロパティを使用してください。

どれくらいの空間を占めるのか
--------------

表示されているコンテンツの幅、スクロールバー (存在する場合)、パディング、境界を含んだ、要素が占める空間の合計量を知る必要がある場合は、`HTMLElement.offsetWidth` プロパティと `HTMLElement.offsetHeight` プロパティを使用します。 ほとんどの場合、要素に適用される変換がなければ、これらは `Element.getBoundingClientRect()` の幅と高さと同じです。変換がある場合、`offsetWidth` および `offsetHeight` は要素のレイアウトの幅と高さを返し、`getBoundingClientRect()` はレンダリングの幅と高さを返します。例として、要素に `width: 100px;` と `transform: scale(0.5);` がある場合 `getBoundingClientRect()` は幅として 50 を返し、`offsetWidth` は 100 を返します。

![offsetWidth、offsetHeight プロパティの決定方法について、パディング、境界、マージンサイズを考慮する。](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-offset.png)

表示されるコンテンツの大きさ
--------------

パディングを含み、境界、マージン、スクロールバーは含まない、実際に表示されるコンテンツが占める空間を知る必要がある場合は、 `Element.clientWidth` プロパティと `Element.clientHeight` プロパティを使用します。

![パディング、境界、マージンサイズを考慮した clientWidth と clientHeight プロパティの決定方法](/ja/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements/dimensions-client.png)

コンテンツの大きさはどれくらいか
----------------

コンテンツの実際のサイズを知る必要がある場合は、現在どれだけ表示されているかに関係なく、`Element.scrollWidth` プロパティと `Element.scrollHeight` プロパティを使用する必要があります。 これらは、スクロールバーの使用により現在一部のみが表示されている場合でも、要素のコンテンツ全体の幅と高さを返します。

例えば、 600x400 ピクセルの要素が 300x300 ピクセルのスクロールボックス内に表示されている場合、`scrollWidth` は 600 を返し、`scrollHeight` は 400 を返します。

関連情報
----

* https://www.w3.org/TR/cssom-view-1/
* MSDN: 要素の寸法と位置の測定
CSS 宣言
======

**CSS 宣言**は、 DOM でオブジェクトに公開されない抽象的な概念です。 CSS プロパティと値の組を表します。

CSS 宣言には、以下の関連するプロパティがあります。

プロパティ名

宣言のプロパティ名。例: `background-color`

値

コンポーネント値のリストとして宣言された値。

important フラグ

設定または未設定

case-sensitive フラグ

プロパティ名が仕様に従って大文字と小文字を区別するように定義されている場合は設定され、そうでない場合は設定されない。

基本的な例
-----

以下の例は、<h1> 要素に対する CSS 宣言ブロック による CSS ルールを示しています。 CSS 宣言ブロックは中括弧で囲まれた行で、 2 つの CSS 宣言を含んでいます。ひとつは `font-style` で、もうひとつは `color` です。


```css
h1 {
  font-style: italic;
  color: rebeccapurple;
}
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # css-declarations |
CSS 宣言ブロック
==========

**CSS 宣言ブロック**は、 CSS のプロパティと値を順番に集めたものです。 DOM では `CSSStyleDeclaration` として表現されます。

それぞれのプロパティと値の組は、CSS 宣言 として知られています。 CSS 宣言ブロックには、以下の関連するプロパティがあります。

computed フラグ

`CSSStyleDeclaration` オブジェクトが指定されたスタイルではなく、計算されたスタイルである場合に設定されます。既定では未設定です。

宣言

このオブジェクトに関連付けられた CSS 宣言です。

親 CSS ルール

CSS 宣言ブロックが関連付けられている `CSSRule` です。

オーナーノード

この CSS 宣言ブロックが関連付けられている要素。それ以外は null。

更新フラグ

この CSS 宣言ブロックがオーナーノードの `style` 属性を更新している場合に設定されます。

`CSSStyleDeclaration` が CSS Object Model (CSSOM) インターフェイスによって返されると、これらのプロパティは、仕様によって定義された適切な値に設定されます。

基本的な例
-----

以下の例は、 <h1> 要素に対する宣言ブロックを持つ CSS ルールを示しています。 CSS の宣言ブロックは、中括弧で囲まれた行です。


```css
h1 {
  margin: 0 auto;
  font-family: "Helvetica Neue", "Arial", sans-serif;
  font-style: italic;
  color: rebeccapurple;
}
```


この CSS 宣言ブロックを表す `CSSStyleDeclaration` を `CSSStyleRule.style` で使用することで返すことができます。


```js
let myRules = document.styleSheets[0].cssRules;
let rule = myRules[0]; // a CSSStyleRule
console.log(rule.style); // a CSSStyleDeclaration object
```

仕様書
---

| Specification |
| --- |
| CSS Object Model (CSSOM) # css-declaration-blocks |
TransformStreamDefaultController: error() メソッド
==============================================

**`error()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、両側のストリームをエラーにします。これ以上何か操作をすると、指定されたエラーメッセージとともに失敗するようになり、キュー内のチャンクは破棄されます。

構文
--


```js
error(reason)
```

### 引数

`reason`

それ以降のストリームの操作において返されるエラーメッセージを格納した文字列。

### 返値

なし (`undefined`)。

例
-

この例では、チャンクが変換できなかったときに `error()` メソッドを使用しています。


```js
const transformContent = {
  start() {
    /\* … \*/
  },
  async transform(chunk, controller) {
    try {
      chunk = await applyMyTransformation(chunk);
    } catch (err) {
      controller.error(`Unable to transform chunk: ${err}`);
    }
    // …
  },
  // …
};
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-error |

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

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

**`desiredSize`** は `TransformStreamDefaultController` インターフェイスの読み取り専用プロパティで、関連付けられた `ReadableStream` のキューを埋めるのに必要なサイズを返します。

`ReadableStream` の内部キューには、キューに入れられたがまだ読み込まれていないチャンクが格納されます。ブラウザーはストリームを埋めるために **必要なサイズ** を決定し、この値が `desiredSize` プロパティによって返されます。

もし `desiredSize` が `0` ならば、キューは満杯です。従って、この情報を使用して手動で背圧をかけることでキューを管理することができます。

値
-

必要なサイズ。

例
-

次の例では、 `desiredSize` をコンソールに出力します。


```js
console.log(controller.desiredSize);
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-desired-size |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TransformStreamDefaultController: enqueue() メソッド
================================================

**`enqueue()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、このストリームの読み取り可能側にある指定されたチャンクをキューに入れます。

読み取り可能なストリームとチャンクについて詳しくは、読み取り可能なストリームの使用を参照してください。

構文
--


```js
enqueue(chunk)
```

### 引数

`chunk`

キューに入れられるチャンク。チャンクとは単一のデータのことです。データの種類は問いません。ストリームは様々な型のチャンクを格納することができます。

### 返値

なし (`undefined`)。

### 例外

`TypeError`

 ストリームが読み取り可能ではありません。
 これは、ストリームが `controller.error()` によってエラーになった場合や、コントローラーの `controller.close()` メソッドが名付けられずに閉じられた場合に発生します。


例
-

この例では、エンコードされたチャンクが `enqueue()` メソッドを使用してキューに渡されます。


```js
const textEncoderStream = new TransformStream({
  transform(chunk, controller) {
    controller.enqueue(new TextEncoder().encode(chunk));
  },
  flush(controller) {
    controller.terminate();
  },
});
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-enqueue |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
TransformStreamDefaultController: terminate() メソッド
==================================================

**`terminate()`** は `TransformStreamDefaultController` インターフェイスのメソッドで、このストリームの読み取り可能側を閉じ、書き込み可能側をエラーにします。

構文
--


```js
terminate()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

下記の例では、 `TransformStreamDefaultController` で `terminate()` メソッドを呼び出しています。


```js
controller.terminate();
```

仕様書
---

| Specification |
| --- |
| Streams Standard # ts-default-controller-terminate |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`InputEvent.isComposing`** は読み取り専用プロパティで、このイベントが `compositionstart` の後、かつ `compositionend` の前に発生したかどうかを示す論理値を返します。

値
-

論理値です。

例
-


```js
const inputEvent = new InputEvent("syntheticInput", false);
console.log(inputEvent.isComposing); // return false
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-iscomposing |

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

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

関連情報
----

* `compositionstart` および `compositionend`
* `InputEvent`
InputEvent: data プロパティ
======================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`data`** は `InputEvent` インターフェイスの読み取り専用プロパティで、挿入された文字を文字列で返します。挿入されるテキストがない変更の場合、例えば文字が削除された場合は、これは空文字列になることがあります。

値
-

文字列です。

例
-

以下の例では、イベントリスナーが input イベントを受信します。 `<input>` 要素に対してテキストの変更が行われると、 `InputEvent.data` によって取得し、 `Node.textContent` プロパティを使用して段落に挿入します。


```html
<p>テキストをコピーおよび貼り付けしてください。</p>

<input type="text" />

<p class="result"></p>
```



```js
const editable = document.querySelector("input");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = `入力テキスト: ${e.data}`;
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dfn-data |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`dataTransfer`** は `InputEvent` インターフェイスの読み取り専用プロパティで、 このプロパティは、編集可能なコンテンツに追加または削除されたリッチテキストまたはプレーンテキストデータに関する情報を含む `DataTransfer` オブジェクトを返します。

値
-

`DataTransfer` オブジェクトです。

例
-

次の単純な例では、input イベントにイベントリスナーを設定して、コンテンツが contenteditable の `<p>` 要素に貼り付けられると、その HTML ソースを `InputEvent.dataTransfer.getData()` メソッドを介して取得して入力欄の下に続く段落で報告するようにしています。

指定されたコンテンツの一部をコピー＆ペーストして、その効果を確かめてみてください。


```html
<p><span style="font-weight: bold; color: blue">Whoa, bold blue text!</span></p>
<p>
  <span style="font-style: italic; color: red">Exciting: italic red text!</span>
</p>
<p>Boring normal text ;-(</p>

<hr />

<p contenteditable="true">
  Go on, try pasting some content into this editable paragraph and see what
  happens!
</p>

<p class="result"></p>
```



```js
const editable = document.querySelector("p[contenteditable]");
const result = document.querySelector(".result");

editable.addEventListener("input", (e) => {
  result.textContent = e.dataTransfer.getData("text/html");
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-datatransfer |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
InputEvent: getTargetRanges() メソッド
==================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`getTargetRanges()`** は `InputEvent` インターフェイスのメソッドで、入力イベントが取り消されない限り DOM の変更に影響される静的範囲を配列で返します。

これにより、ウェブアプリケーションは、ブラウザーが DOM ツリーを変更する前にテキスト編集の動作を上書きすることができ、パフォーマンスを向上させるために入力イベントの制御をより強化することができます。

構文
--


```js
getTargetRanges()
```

### 引数

なし。

### 返値

`StaticRange` オブジェクトの配列です。

例
-

### 機能検出

以下の関数は、`beforeinput`、つまり `getTargetRanges` に対応している場合に true を返します。


```js
function isBeforeInputEventAvailable() {
  return (
    window.InputEvent &&
    typeof InputEvent.prototype.getTargetRanges === "function"
  );
}
```

### 基本的な使い方

以下の例では、 `contentitable` 要素を選択して、 `beforeinput` イベントを利用して `getTargetRanges()` の結果をログ出力しています。


```js
const editableElem = document.querySelector('[contenteditable="true"]');

editableElem.addEventListener("beforeinput", (e) => {
  const targetRanges = e.getTargetRanges();
  console.log(targetRanges);
});
```

仕様書
---

| Specification |
| --- |
| Input Events Level 2 # dom-inputevent-gettargetranges |

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

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

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`inputType`** は `InputEvent` インターフェイスの読み取り専用プロパティで、編集可能なコンテンツの変更が行われた種別を返します。変更は例えば挿入、削除、テキスト整形などがあります。

値
-

入力された入力種別を含む文字列です。`insertText`、`deleteContentBackward`、`insertFromPaste`、`formatBold` など、多くの値を取り得ます。利用可能な入力種別の完全なリストは、Input Events Level 1 仕様の Attributes の章を参照してください。

例
-

この例は編集可能な `<div>` の入力イベント の `inputType` をログ出力します。

### HTML


```html
<p id="log">入力種別:</p>
<div
 contenteditable="true"
 style="margin: 20px;padding: 20px;border:2px dashed red;">
  <p>
    いくつかのサンプルテキストです。改行を入れたり、異なる形でテキストを削除したり、異なるコンテンツを貼り付けたりしてみてください。
  </p>
  <hr />
  <ul>
    <li>サンプルの</li>
    <li>箇条書き</li>
    <li>リスト</li>
  </ul>
  <p>他の段落</p>
</div>
```

### JavaScript


```js
const log = document.getElementById("log");
const editable = document.querySelector("div[contenteditable]");
editable.addEventListener("input", logInputType);

function logInputType(event) {
  log.textContent = `入力種別: ${event.inputType}`;
}
```

### 結果

`<div>` 内のテキストを編集して、どうなるかを試してみてください。

**メモ:** もっと詳細な例として Masayuki Nakano's InputEvent test suite も参照してください。

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-inputtype |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
InputEvent: InputEvent() コンストラクター
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`InputEvent()`** コンストラクターは、新しい `InputEvent` オブジェクトを作成します。

構文
--


```js
new InputEvent(type)
new InputEvent(type, options)
```

### 引数

`type`

 イベントの名前の文字列です。
 大文字小文字の区別があり、ブラウザーは `beforeinput` または `input` を設定します。


`options` 省略可

オブジェクトで、*`UIEvent()` で定義されたプロパティに加え*、以下のプロパティを持つことができます。

`inputType` 省略可

文字列で、テキストの挿入、削除、書式設定など、編集可能なコンテンツに対する変更の種類を指定します。

`data` 省略可

 文字列で、挿入する文字を保持します。
 これは、変更がテキストを挿入しない場合（例えば、文字を削除する場合など）、空文字列になることがあります。


`isComposing` 省略可

論理値で、そのイベントが変換セッションの一部であることを示します。つまり、 `compositionstart` イベントの後で、 `compositionend` イベントの前にあることを意味します。既定では、 `false` です。


### 返値

新しい `InputEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| UI Events # dom-inputevent-inputevent |

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

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

関連情報
----

* `InputEvent`: 構築するオブジェクトのインスタンスです。
HTMLFormElement: method プロパティ
=============================

**`HTMLFormElement.method`** プロパティは、`<form>` を送信するために使用される HTTP メソッドを表します。

明示的に指定されなかった場合、既定のメソッドは 'get' です。

値
-

文字列です。

例
-


```js
document.forms["myform"].method = "post";

const formElement = document.createElement("form"); // フォームを生成
document.body.appendChild(formElement);
console.log(formElement.method); // 'get'
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fs-method |

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

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