recursal/MDN huggingface dataset:
HTMLInputElement: setSelectionRange() メソッド
==========================================

**`HTMLInputElement.setSelectionRange()`** メソッドは、 `<input>` または `<textarea>` 要素の中で現在のテキストの選択範囲の開始位置と終了位置を設定します。

オプションとして、新しいバージョンのブラウザーでは、選択が行われたとみなす方向を指定することができます。これにより、例えば、ユーザーが選択範囲を設定するのに、選択されたテキストの末尾から先頭に向けてクリックとドラッグが行われたことを示すことができます。

この関数は 1 回の呼び出しで、 `HTMLInputElement.selectionStart`, `selectionEnd`, `selectionDirection` の各プロパティを更新します。

WHATWG フォーム仕様書によると、 `selectionStart`, `selectionEnd` プロパティと `setSelectionRange` メソッドは、 text, search, URL, tel, password 型の入力欄にのみ適用されることに注意してください。 Chrome のバージョン 33 以降では、それ以外の入力型でこれらのプロパティとメソッドにアクセスすると例外が発生します。例えば、 `number` 型の入力欄では、 "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection" （'HTMLInputElement' の 'selectionStart' プロパティを読み取りに失敗しました。この input 要素の入力型 ('number') は選択に対応していません）となります。

input 要素の**すべて**のテキストを選択したい場合は、代わりに HTMLInputElement.select() メソッドを使用してください。

構文
--


```js
setSelectionRange(selectionStart, selectionEnd)
setSelectionRange(selectionStart, selectionEnd, selectionDirection)
```

### 引数

`selectionEnd` が `selectionStart` より小さい場合、両方の値は `selectionEnd` として扱われます。

`selectionStart`

選択する最初の文字の 0 から始まる位置です。位置が要素の値の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。

`selectionEnd`

選択する最後の文字の*次の* 0 から始まる位置です。位置が要素の長さよりも大きい場合は、要素の値の末尾の位置と見なされます。

`selectionDirection` 省略可

選択が行われたと見なされる方向を示す文字列です。取りうる値は次の通りです。

* `"forward"`
* `"backward"`
* `"none"` 選択方向が不明または無関係な場合です。既定値です。

### 返値

なし (`undefined`)。

例
-

この例の中のボタンをクリックすると、テキストボックスの 3、4、5 番目の文字（"Mozilla" の "zil"）が選択状態になります。

### HTML


```html
<input type="text" id="text-box" size="20" value="Mozilla" />
<button onclick="selectText()">テキストを選択</button>
```

### JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setSelectionRange(2, 5);
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setselectionrange-dev |

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

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

関連情報
----

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `Selection`
HTMLInputElement: selectionchange イベント
======================================

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

**`selectionchange`** は選択 API のイベントで、 `<input>` 要素の中でテキストの選択状態が変化したときに発行されます。
 これは、文字単位の選択範囲位が変化した場合も、キャレットが移動したときも含みます。

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

このイベントは通常 `<input>` 上にイベントリスナーを追加し、ハンドラー関数内で `HTMLInputElement` の `selectionStart`、`selectionEnd`、`selectionDirection` の各プロパティを読み取ることで処理します。

また、`onselectionchange` イベントハンドラーにリスナーを追加し、ハンドラー関数内で `Document.getSelection()` を使って選択状態を得ることもできます。しかし、これはテキストの選択範囲の変更を取得するのにはあまり便利ではありません。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

以下の例は、 `<input>` 要素の中にあるテキストの選択状態を取得する方法を示しています。

### HTML


```html
<div>
  こちらにテキストを入力して選択してください:<br /><input
 id="mytext"
 rows="2"
 cols="20" />
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>
```

### JavaScript


```js
const myinput = document.getElementById("mytext");

myinput.addEventListener("selectionchange", () => {
  document.getElementById("start").textContent = myinput.selectionStart;
  document.getElementById("end").textContent = myinput.selectionEnd;
  document.getElementById("direction").textContent = myinput.selectionDirection;
});
```

### 結果

仕様書
---

| Specification |
| --- |
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLInputElement: invalid イベント
==============================

**`invalid`** イベントは、送信可能な要素が制約検証を受け、制約を満たしていない場合に発行されます。

このイベントは、送信時にフォームの問題の概要を表示するのに便利です。フォームが送信されると、 `invalid` イベントがそれぞれの妥当ではない状態にあるフォームコントロールで発生します。送信可能な要素が妥当であるかどうかは、その所有者である `<form>` を送信する前、または `checkValidity()` メソッドがその要素またはその所有者である `<form>` に呼び出された後にチェックされます。

`blur` ではチェックが行われません。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

フォームが無効な値で送信された場合、送信可能な要素がチェックされ、エラーが見つかった場合、無効な要素で `invalid` イベントが発生します。この例では、入力に無効な値があったために `invalid` イベントが発生した場合、無効な値がログに記録されます。

### HTML


```html
<form action="#">
  <div>
    <label>
      1 から 10 までの整数を入力してください:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="送信" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>
```

### JavaScript


```js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("invalid", (e) => {
  log.appendChild(
    Object.assign(document.createElement("li"), {
      textContent: JSON.stringify(e.target.value),
    }),
  );
});
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # event-invalid |

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

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

関連情報
----

* HTML の `<form>` element
* 関連イベント: `submit`
* CSS の `:invalid` 擬似クラス
HTMLInputElement: setRangeText() メソッド
=====================================

**`HTMLInputElement.setRangeText()`** メソッドは、 `<input>` や `<textarea>` 要素の中のテキストの範囲を新しい文字列に置き換えます。

構文
--


```js
setRangeText(replacement)
setRangeText(replacement, start)
setRangeText(replacement, start, end)
setRangeText(replacement, start, end, selectMode)
```

### 引数

`replacement`

挿入する文字列。

`start` 省略可

置換する最初の文字を 0 から始まる位置で指定します。既定値は現在の `selectionStart` の値（ユーザーが現在選択している先頭）です。

`end` 省略可

置換する最後の文字の*次の*文字を 0 から始まる位置で指定します。既定値は現在の `selectionEnd` の値（ユーザーが現在選択している末尾）です。

`selectMode` 省略可

 テキストが置換された後で、選択範囲がどのように設定されるかを定義する文字列です。
 次の値が利用できます。


* `"select"`: 新規挿入したテキストを選択します。
* `"start"`: 挿入したテキストの直前に選択範囲を移動します。
* `"end"`: 挿入したテキストの直後に選択範囲を移動します。
* `"preserve"`: 選択範囲を保全しようとします。これが既定値です。

### 返値

なし (`undefined`)。

例
-

この例にあるボタンをクリックすると、テキストボックス内のテキストの一部を置き換えます。新しく挿入されたテキストは、その後で強調（選択）されます。

### HTML


```html
<input
 type="text"
 id="text-box"
 size="30"
 value="このテキストは更新されていません。" />
<button onclick="selectText()">テキストを更新</button>
```

### JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.setRangeText("ました", 11, 16, "select");
}
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-textarea/input-setrangetext-dev |

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

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

関連情報
----

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `Selection`
HTMLInputElement: disabled プロパティ
================================

**`HTMLInputElement.disabled`** は `disabled` という HTML の属性を反映した論理値で、このコントロールが無効であるかどうかを表します。無効である場合、クリックを受け付けません。無効化された要素は使用できず、クリックもできません。

値
-

論理値です。

例
-

### HTML


```html
<p>
  <label>
    <input id="check-box" name="b" value="1" type="checkbox" disabled />
    このボックスをチェックしてください。
  </label>
</p>
<p>
  <label>
    <input id="toggle-box" name="b" value="2" type="checkbox" />
    他のボックスを有効にします。
  </label>
</p>
```

### JavaScript


```js
const checkBox = document.getElementById("check-box");
const toggleBox = document.getElementById("toggle-box");

toggleBox.addEventListener(
  "change",
  (event) => {
    checkBox.disabled = !event.target.checked;
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fe-disabled |

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

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

**`HTMLInputElement.labels`** は読み取り専用プロパティで、 `hidden` 以外の `<input>` 要素に関連付けられた `<label>` 要素の `NodeList` を返します。この要素が `hidden` 型であった場合は、このプロパティは `null` を返します。

値
-

`NodeList` で、その `<input>` 要素に関連付けられた `<label>` 要素が入ります。

例
-

### HTML


```html
<label id="label1" for="test">Label 1</label>
<input id="test" />
<label id="label2" for="test">Label 2</label>
```

### JavaScript


```js
window.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("test");
  for (const label of input.labels) {
    console.log(label.textContent); // "Label 1" and "Label 2"
  }
});
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-lfe-labels-dev |

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

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

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:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`popoverTargetAction`** は `HTMLButtonElement` インターフェイスのプロパティで、`<input>` 要素の `type="button"` 型でで制御されるポップオーバー要素で実行されるアクション（`"hide"`、`"show"`、`"toggle"` の何れか）を取得および設定します。

これは HTML の `popovertargetaction` 属性の値を反映します。

値
-

列挙値です。取りうる値は次の通りです。

`"hide"`

このボタンは表示中のポップオーバーを非表示にします。すでに非表示のポップオーバーを非表示にしようとした場合は、何も行われません。

`"show"`

このボタンは非表示のポップオーバーを表示します。すでに表示中のポップオーバーを表示させようとした場合は、何も行われません。

`"toggle"`

このボタンはポップオーバーを表示と非表示の間でトグル切り替えします。ポップオーバーが非表示の場合は、表示されます。ポップオーバーが表示中の場合は、非表示になります。`popoverTargetAction` が設定されていない場合、`"toggle"` がこの制御ボタンで行われる既定のアクションになります。

例
-


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popovertargetaction |

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

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

関連情報
----

* ポップオーバー API
HTMLInputElement: select() メソッド
===============================

**`HTMLInputElement.select()`** メソッドは、`<textarea>` 要素またはテキストフィールドを含む `<input>` 要素内のすべてのテキストを選択します。

構文
--


```js
select()
```

### 引数

なし。

### 返値

なし (`undefined`)。

例
-

この例のボタンをクリックすると、 `<input>` 要素内のすべてのテキストが選択されます。

### HTML


```html
<input type="text" id="text-box" size="20" value="Hello world!" />
<button onclick="selectText()">テキストを選択</button>
```

### JavaScript


```js
function selectText() {
  const input = document.getElementById("text-box");
  input.focus();
  input.select();
}
```

### 結果

メモ
--

`element.select()` を呼び出しても、入力欄がフォーカスを得るとは限りませんので、よく `HTMLElement.focus` と一緒に使われます。

これに対応していないブラウザーでは、 HTMLInputElement.setSelectionRange() の引数に 0 と入力値の長さを指定して呼び出すことで置き換えることができます。


```html
<input onClick="this.select();" value="Sample Text" />
<!-- equivalent to -->
<input
 onClick="this.setSelectionRange(0, this.value.length);"
 value="Sample Text" />
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-textarea/input-select |

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

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

関連情報
----

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `HTMLInputElement.setSelectionRange`
HTMLInputElement: setCustomValidity() メソッド
==========================================

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
**`HTMLInputElement.setCustomValidity()`** メソッドは、その要素にカスタム検証メッセージを設定します。

構文
--


```js
setCustomValidity(message)
```

### 引数

`message`

検証エラーに使用するメッセージです。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

この例では、 input 要素の ID を渡し、値が不足しているか、低すぎるか、高すぎるかによって、異なるエラーメッセージを設定します。さらに、同じ要素で `reportValidity()` メソッドを呼び出す必要があります。そうしないと何も起こりません。


```js
function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("You gotta fill this out, yo!");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("We need a higher number!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("That's too high!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}
```


エラーがない場合は、メッセージを空文字列に設定することが重要です。エラーメッセージが空でない限り、フォームは検証を通過せず、送信されません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

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

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

関連情報
----

* 学習: クライアント側フォーム検証
* ガイド: 制約検証
* `ValidityState`
HTMLInputElement: select イベント
=============================

**`select`** イベントは、いくらかのテキストが選択されたときに発生します。

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-

### 選択範囲をログ出力


```html
<input value="この要素のテキストの一部を選択してみてください。" />
<p id="log"></p>
```



```js
function logSelection(event) {
  const log = document.getElementById("log");
  const selection = event.target.value.substring(
    event.target.selectionStart,
    event.target.selectionEnd,
  );
  log.textContent = `You selected: ${selection}`;
}

const input = document.querySelector("input");
input.addEventListener("select", logSelection);
```

### onselect による同等の処理

イベントハンドラーを `onselect` プロパティで設定することもできます。


```js
input.onselect = logSelection;
```

仕様書
---

| Specification |
| --- |
| HTML Standard # event-select |
| HTML Standard # handler-onselect |

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

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

**`webkitEntries`** は `HTMLInputElement` インターフェイスの読み取り専用プロパティで、ユーザーが `<input>` 要素の `file` 型を用いて選択したファイルやディレクトリーを表す、ファイルシステムの項目（`FileSystemEntry` (en-US) に基づくオブジェクト）の配列を含みます。その選択がドラッグ & ドロップで行われた場合にのみ、ダイアログ内でファイルを選択しても、プロパティは空になります。

`webkitdirectory` プロパティが `true` である場合のみ、配列が入ることがあります。これは、 `<input>` 要素でユーザーがディレクトリーを選択することができることを意味します。

**メモ:** このプロパティは仕様書で `webkitEntries` と呼ばれていますが、これはもともと Google Chrome 独自の API であったためです。いつか改名される可能性があります。

値
-

`FileSystemEntry` (en-US) に基づいたオブジェクト配列で、それぞれの要素が `<input>` 要素で選択されたファイルを表します。具体的には、ファイルは `FileSystemFileEntry` オブジェクトで表現され、許可されていれば、ディレクトリーは `FileSystemDirectoryEntry` オブジェクトで表されます。

例
-

この例では、ファイル選択 `<input>` 要素を作成し、選択されたファイルを処理する方法を示しています。

### HTML


```html
<input id="files" type="file" multiple />
```

### JavaScript


```js
document.getElementById("files").addEventListener("change", (event) => {
  event.target.webkitEntries.forEach((entry) => {
    /\* do stuff with the entry \*/
  });
});
```


`change` イベントが発生するたびに、このコードは選択されたファイルリストを走査して、 `FileSystemEntry` (en-US) ベースのオブジェクトを取得し操作をします。

仕様書
---

| Specification |
| --- |
| File and Directory Entries API # dom-htmlinputelement-webkitentries |

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

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

関連情報
----

* ファイルとディレクトリー項目 API
* ファイルとディレクトリー項目 API 入門
* `HTMLInputElement`
* `FileSystemEntry` (en-US)
* `FileSystem`
HTMLInputElement: checkValidity() メソッド
======================================

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
**`HTMLInputElement.checkValidity()`** メソッドは、その要素の値の妥当性を示す論理値を返します。値が無効である場合、このメソッドは要素に `invalid` イベントを発行します。

構文
--


```js
checkValidity()
```

### 引数

なし。

### 返値

要素の値を検証して問題ない場合は `true` を、そうでなければ `false` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

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

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

関連情報
----

* reportValidity
* 学習: クライアント側フォーム検証
* ガイド: 制約検証
HTMLInputElement: reportValidity() メソッド
=======================================

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
**`reportValidity()`** は `HTMLInputElement` インターフェイスのメソッドで、 `checkValidity()` メソッドと同じ検証のチェック手順を実行します。値が無効であった場合、このメソッドはその要素に `invalid` イベントを発行し、（そのイベントがキャンセルされなければ）ユーザーに問題を報告します。

構文
--


```js
reportValidity()
```

### 引数

なし。

### 返値

要素を検証して問題がなければ `true` を返し、それ以外の場合は `false` を返します。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-reportvalidity-dev |

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

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

関連情報
----

* checkValidity
* 学習: クライアント側フォーム検証
* ガイド: 制約検証
HTMLInputElement: popoverTargetElement プロパティ
============================================

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:** **これは実験的な機能です。**  
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

**`popoverTargetElement`** は `HTMLInputElement` インターフェイスのプロパティで、`<input>` 要素の `type="button"` 型で制御されるポップオーバー要素を取得および設定します。

これは JavaScript において HTML の `popovertarget` 属性に相当するものです。

値
-

DOM 内でのポップオーバー要素への参照です。

例
-


```js
function supportsPopover() {
  return HTMLElement.prototype.hasOwnProperty("popover");
}

const popover = document.getElementById("mypopover");
const toggleBtn = document.getElementById("toggleBtn");

const popoverSupported = supportsPopover();

if (popoverSupported) {
  popover.popover = "auto";
  toggleBtn.popoverTargetElement = popover;
  toggleBtn.popoverTargetAction = "toggle";
} else {
  console.log("Popover API not supported.");
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-popovertargetelement |

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

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

関連情報
----

* ポップオーバー API
HTMLInputElement: search イベント
=============================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**`search`** イベントは、 `<input>` 要素の `type="search"` にて検索が開始されたときに発生します。

検索を開始する方法はいくつかあり、例えば、 `<input>` にフォーカスがある時に `Enter` を押したり、`incremental` 属性が存在すれば、最も新しいキー入力から UA 定義のタイムアウト時間が経過してから検索が開始されます（新しくキー入力をするとタイムアウトがリセットされるので、イベントが繰り返して発生します）。

現在 UA が `<input type="search">` を実装している方法では、フィールド内をクリアするために追加のコントロールを置きます。このコントロールを使用しても `search` イベントが発生します。この場合、 `<input>` 要素の `value` は空文字列になります。

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

構文
--

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


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

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

イベント型
-----

一般的な `Event` です。

例
-


```js
// addEventListener 版
const input = document.querySelector('input[type="search"]');

input.addEventListener("search", () => {
  console.log(`The term searched for was ${input.value}`);
});
```



```js
// onsearch 版
const input = document.querySelector('input[type="search"]');

input.onsearch = () => {
  console.log(`The term searched for was ${input.value}`);
};
```

仕様書
---

このイベントは仕様書に含まれていません。

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

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

**`HTMLInputElement.multiple`** プロパティは、入力フィールドが複数の値を持つことができるかどうかを示します。 Firefox では、 `multiple` は `<input type="file">` でのみ対応しています。

値
-

論理値です。

例
-


```js
// fileInput は <input type=file multiple> です
let fileInput = document.getElementById("myfileinput");

if (fileInput.multiple) {
  // fileInput.files を反復処理
  for (const file of fileInput.files) {
    // ファイルの一つに対してアクションを実行
  }
  // 一つのファイルのみが有効な場合
} else {
  let [file] = fileInput.files;
}
```

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-input-multiple |

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

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

関連情報
----

* FileList
* Bug 523771 - <input type=file multiple> への対応
GamepadHapticActuator.pulse()
=============================

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

`GamepadHapticActuator` インターフェイスの **`pulse()`** メソッドは、指定された期間、特定の強度でハードウェアパルスを作成します。

構文
--


```js
gamepadHapticActuatorInstance.pulse(value, duration).then(function(result) { ... });
```

### 引数

*value*

パルスの強度を表す double 。これはハードウェアの型によって異なりますが、通常は 0.0 (強度なし) から 1.0 (完全な強度) の値を取ります。

*duration*

パルスの持続時間をミリ秒で表す double 。


**メモ:** `pulse()` への繰り返しの呼び出しは、それらがまた進行中である場合、以前の呼び出しをオーバーライドします。

### 返り値

パルスが正常に完了したときに `true` の値で解決される promise 。

例
-

TBC

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadhapticactuator-pulse |

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

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

関連情報
----

* Gamepad API
GamepadHapticActuator.type
==========================

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

`GamepadHapticActuator` インターフェイスの **`type`** 読み取り専用プロパティは、触覚ハードウェアの型を表す列挙型を返します。

構文
--


```js
var myActuatorType = gamepadHapticActuatorInstance.type;
```

### 値

列挙型 `GamepadHapticActuatorType`; 現在利用な型は次の通りです:

* `vibration` — 振動のハードウェアで、ゴロゴロとした効果を生み出します。
例
-

TBC

仕様書
---

| Specification |
| --- |
| Gamepad Extensions # dom-gamepadhapticactuatortype |

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

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

関連情報
----

* Gamepad API
ScriptProcessorNode: audioprocess イベント
======================================

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

`ScriptProcessorNode` インターフェイスの `audioprocess` イベントは、スクリプトプロセッサーの入力バッファーが処理される準備ができた時発火します。

**メモ:** この機能は AudioWorklets および `AudioWorkletNode` インターフェイスに置き換えられました。

このイベントはキャンセル不可で、バブルしません。

イベント型
-----

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

Event

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

*親の `Event` から継承したプロパティも実装しています。*

`playbackTime` 読取専用 

音声が再生される時間を表す `double` の値です。`AudioContext.currentTime` の時間として定義されます。

`inputBuffer` 読取専用 

 処理対象の入力音声データが格納されたバッファーの `AudioBuffer` です。
 チャンネル数はファクトリーメソッド `AudioContext.createScriptProcessor()` の引数 `numberOfInputChannels` で指定した数です。
 返される `AudioBuffer` はイベントハンドラーのスコープでのみ有効であることに注意してください。


`outputBuffer` 読取専用 

 出力音声データを格納する先であるバッファーの `AudioBuffer` です。
 チャンネル数はファクトリーメソッド `AudioContext.createScriptProcessor()` の引数 `numberOfOutputChannels` で指定した数です。
 返される `AudioBuffer` はイベントハンドラーのスコープでのみ有効であることに注意してください。


例
-


```js
scriptNode.addEventListener("audioprocess", (audioProcessingEvent) => {
  // 入力バッファーは、前に読み込んだ歌です
  const inputBuffer = audioProcessingEvent.inputBuffer;

  // 出力バッファーには、変更されて再生されるサンプルが入ります
  const outputBuffer = audioProcessingEvent.outputBuffer;

  // 出力の各チャンネルについてループします (今回は 1 個のみ)
  for (let channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
    const inputData = inputBuffer.getChannelData(channel);
    const outputData = outputBuffer.getChannelData(channel);

    // 4096 個のサンプルについてループします
    for (let sample = 0; sample < inputBuffer.length; sample++) {
      // 出力を入力と同じにします
      outputData[sample] = inputData[sample];

      // 出力の各サンプルにノイズを加えます
      outputData[sample] += (Math.random() \* 2 - 1) \* 0.2;
    }
  }
});
```


イベントハンドラーを `onaudioprocess` プロパティを用いて設定することもできます。


```js
scriptNode.onaudioprocess = (audioProcessingEvent) => {
  // ...
};
```

仕様書
---

2014 年 8 月 29 日の Web Audio API specification の発行以降、この機能は非推奨になりました。この機能は標準化を検討されていません。

この機能は AudioWorklets および `AudioWorkletNode` インターフェイスに置き換えられました。

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

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

関連情報
----

* Web Audio API