PushSubscriptionOptions: userVisibleOnly property - Web APIs

PushSubscriptionOptions: userVisibleOnly property
=================================================

The **`userVisibleOnly`** read-only property of the `PushSubscriptionOptions` interface indicates if the returned push subscription will only be used for messages whose effect is made visible to the user.

Value
-----

A boolean value that indicates whether the returned push subscription will only be used for messages whose effect is made visible to the user.

Examples
--------

In the example below the value of `userVisibleOnly` is printed to the console.

```js
navigator.serviceWorker.ready.then((reg) => {
  reg.pushManager.getSubscription().then((subscription) => {
    const options = subscription.options;
    console.log(options.userVisibleOnly); // true if this is a user visible subscription
  });
});
```

Specifications
--------------

| Specification |
| --- |
| Push API # dom-pushsubscriptionoptions-uservisibleonly |

Browser compatibility
---------------------

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


IDBKeyRange: only() static method - Web APIs

IDBKeyRange: only() static method
=================================

 The **`only()`** static method of the `IDBKeyRange`
 interface creates a new key range containing a single value.

**Note:** This feature is available in Web Workers

Syntax
------

```js
IDBKeyRange.only(value)
```

### Parameters

`value`

The value for the new key range.

### Return value

`IDBKeyRange`: The newly created key range.

### Exceptions

`DataError` `DOMException`

Thrown if the `value` parameter was not a valid key.

Examples
--------

 The following example illustrates how you'd use an only key range. Here we declare
 a `keyRangeValue = IDBKeyRange.only("A");` — a range that only includes the
 value "A". We open a transaction (using `IDBTransaction`) and an object
 store, and open a Cursor with `IDBObjectStore.openCursor`,
 declaring `keyRangeValue` as its optional key range value. This means that
 the cursor will only retrieve the record with the key value "A".

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange
 repo (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.only("A");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-only① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: bound() static method - Web APIs

IDBKeyRange: bound() static method
==================================

 The **`bound()`** static method of the `IDBKeyRange`
 interface creates a new key range with the specified upper and lower bounds. The
 bounds can be open (that is, the bounds exclude the endpoint values) or closed (that
 is, the bounds include the endpoint values). By default, the bounds are closed.

**Note:** This feature is available in Web Workers

Syntax
------

```js
IDBKeyRange.bound(lower, upper)
IDBKeyRange.bound(lower, upper, lowerOpen)
IDBKeyRange.bound(lower, upper, lowerOpen, upperOpen)
```

### Parameters

`lower`

specifies the lower bound of the new key range.

`upper`

specifies the upper bound of the new key range.

`lowerOpen` Optional

 indicates whether the lower bound excludes the endpoint value. The default is
 false.

`upperOpen` Optional

 Indicates whether the upper bound excludes the endpoint value. The default is
 false.

### Return value

`IDBKeyRange`: The newly created key range.

### Exceptions

`DataError` `DOMException`

Thrown when one of the following conditions is met:

* The lower or upper parameters were not passed a valid key.
* The lower key is greater than the upper key.
* The lower key and upper key match and either of the bounds are open.

Examples
--------

 The following example illustrates how you'd use a bound key range. Here we declare
 a `keyRangeValue = IDBKeyRange.bound("A", "F");` — a range between values of
 "A" and "F". We open a transaction (using `IDBTransaction`) and an object
 store, and open a Cursor with `IDBObjectStore.openCursor`,
 declaring `keyRangeValue` as its optional key range value. This means that
 the cursor will only retrieve records with keys inside that range. This range includes
 the values "A" and "F", as we haven't declared that they should be open bounds. If we
 used `IDBKeyRange.bound("A", "F", true, true);`, then the range would not
 include `"A"` and `"F"`, only the values between them.

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at the idbkeyrange directory in the indexeddb-examples repo. (View the example live too.

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("A", "F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-bound① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: upper property - Web APIs

IDBKeyRange: upper property
===========================

 The **`upper`** read-only property of the
 `IDBKeyRange` interface returns the upper bound of the key range.

**Note:** This feature is available in Web Workers

Value
-----

The upper bound of the key range (can be any type.)

Examples
--------

 The following example illustrates how you'd use a key range. Here we
 declare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — a
 range that includes everything between "F" and "W" but not including them — since both
 the upper and lower bounds have been declared as open (`true`). We open a
 transaction (using `IDBTransaction`) and an object store, and open a Cursor
 with `IDBObjectStore.openCursor`, declaring `keyRangeValue` as
 its optional key range value.

 After declaring the key range, we log its `upper` property value to the
 console, which should appear as "W".

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo
 (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.upper);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upper① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: lowerOpen property - Web APIs

IDBKeyRange: lowerOpen property
===============================

 The **`lowerOpen`** read-only property of the
 `IDBKeyRange` interface returns a boolean indicating whether the
 lower-bound value is included in the key range.

**Note:** This feature is available in Web Workers

Value
-----

A boolean value:

| Value | Indication |
| --- | --- |
| `true` | The lower-bound value is not included in the key range. |
| `false` | The lower-bound value is included in the key range. |

Examples
--------

 The following example illustrates how you'd use a key range. Here we
 declare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — a
 range that includes everything between "F" and "W" but not including them — since both
 the upper and lower bounds have been declared as open (`true`). We open a
 transaction (using `IDBTransaction`) and an object store, and open a Cursor
 with `IDBObjectStore.openCursor`, declaring `keyRangeValue` as
 its optional key range value.

 After declaring the key range, we log its `lowerOpen` property value to the
 console, which should appear as "true": the lower bound is open, so won't be included in
 the range.

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.lowerOpen);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");
  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-loweropen① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: lowerBound() static method - Web APIs

IDBKeyRange: lowerBound() static method
=======================================

 The **`lowerBound()`** static method of the
 `IDBKeyRange` interface creates a new key range with only a lower bound.
 By default, it includes the lower endpoint value and is closed.

**Note:** This feature is available in Web Workers

Syntax
------

```js
IDBKeyRange.lowerBound(lower)
IDBKeyRange.lowerBound(lower, open)
```

### Parameters

`lower`

Specifies the lower bound of the new key range.

`open` Optional

 Indicates whether the lower bound excludes the endpoint value. The default is
 false.

### Return value

`IDBKeyRange`: The newly created key range.

### Exceptions

`DataError` `DOMException`

Thrown if the key associated with the `lower` parameter is not a valid key.

Examples
--------

 The following example illustrates how you'd use a lower bound key range. Here we
 declare `keyRangeValue = IDBKeyRange.lowerBound("F", false);` — a range that
 includes the value "F" and everything after it. We open a transaction (using
 `IDBTransaction`) and an object store, and open a Cursor with
 `IDBObjectStore.openCursor`, declaring `keyRangeValue` as its
 optional key range value. This means that the cursor will only retrieve the record with
 the key value "F" and all that come after it. If we used
 `IDBKeyRange.lowerBound("F", true);`, then the range would not include "F";
 only the values after it.

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo
 (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.lowerBound("F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lowerbound① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: lower property - Web APIs

IDBKeyRange: lower property
===========================

 The **`lower`** read-only property of the
 `IDBKeyRange` interface returns the lower bound of the key range.

**Note:** This feature is available in Web Workers

Value
-----

 The lower bound of the key range (can be any
 type.)

Examples
--------

 The following example illustrates how you'd use a key range. Here we
 declare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — a
 range that includes everything between "F" and "W" but not including them — since both
 the upper and lower bounds have been declared as open (`true`). We open a
 transaction (using `IDBTransaction`) and an object store, and open a Cursor
 with `IDBObjectStore.openCursor`, declaring `keyRangeValue` as
 its optional key range value.

 After declaring the key range, we log its `lower` property value to the
 console, which should appear as "F".

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo.
 (View the example live too.

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.lower);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-lower① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: upperOpen property - Web APIs

IDBKeyRange: upperOpen property
===============================

 The **`upperOpen`** read-only property of the
 `IDBKeyRange` interface returns a boolean indicating whether the
 upper-bound value is included in the key range.

**Note:** This feature is available in Web Workers

Value
-----

A boolean value:

| Value | Indication |
| --- | --- |
| `true` | The upper-bound value is not included in the key range. |
| `false` | The upper-bound value is included in the key range. |

Examples
--------

 The following example illustrates how you'd use a key range. Here we
 declare `keyRangeValue = IDBKeyRange.upperBound("F", "W", true, true);` — a
 range that includes everything between "F" and "W" but not including them — since both
 the upper and lower bounds have been declared as open (`true`). We open a
 transaction (using `IDBTransaction`) and an object store, and open a Cursor
 with `IDBObjectStore.openCursor`, declaring `keyRangeValue` as
 its optional key range value.

 After declaring the key range, we log its `upperOpen` property value to the
 console, which should appear as "true": the upper bound is open, so won't be included in
 the range.

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.bound("F", "W", true, true);
  console.log(keyRangeValue.upperOpen);

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");
  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);
      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upperopen① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: upperBound() static method - Web APIs

IDBKeyRange: upperBound() static method
=======================================

 The **`upperBound()`** static method of the
 `IDBKeyRange` interface creates a new upper-bound key range. By default,
 it includes the upper endpoint value and is closed.

**Note:** This feature is available in Web Workers

Syntax
------

```js
IDBKeyRange.upperBound(upper)
IDBKeyRange.upperBound(upper, open)
```

### Parameters

`upper`

Specifies the upper bound of the new key range.

`open` Optional

Indicates whether the upper bound excludes the endpoint value. The default is false.

### Return value

`IDBKeyRange`: The newly created key range.

### Exceptions

`DataError` `DOMException`

Thrown if the key associated with the `upper` parameter is not a valid key.

Examples
--------

 The following example illustrates how you'd use an upper bound key range. Here we
 declare `keyRangeValue = IDBKeyRange.upperBound("F");` — a range that
 includes the value "F" and everything before it. We open a transaction (using
 `IDBTransaction`) and an object store, and open a Cursor with
 `IDBObjectStore.openCursor`, declaring `keyRangeValue` as its
 optional key range value.

 If we used `IDBKeyRange.upperBound("F", true);`, then the range excludes
 "F"; and instead only includes the values before it.

**Note:** For a more complete example allowing you to experiment with
 key range, have a look at our IDBKeyRange-example repo
 (view the example live too.)

```js
function displayData() {
  const keyRangeValue = IDBKeyRange.upperBound("F");

  const transaction = db.transaction(["fThings"], "readonly");
  const objectStore = transaction.objectStore("fThings");

  objectStore.openCursor(keyRangeValue).onsuccess = (event) => {
    const cursor = event.target.result;
    if (cursor) {
      const listItem = document.createElement("li");
      listItem.textContent = `${cursor.value.fThing}, ${cursor.value.fRating}`;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log("Entries all displayed.");
    }
  };
}
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-upperbound① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


IDBKeyRange: includes() method - Web APIs

IDBKeyRange: includes() method
==============================

 The `includes()` method of the `IDBKeyRange`
 interface returns a boolean indicating whether a specified key is inside the key
 range.

**Note:** This feature is available in Web Workers

Syntax
------

```js
includes(key)
```

### Parameters

`key`

The key you want to check for in your key range. This can be any type.

### Return value

A boolean value.

### Exceptions

`DataError` `DOMException`

Thrown if the supplied key was not a valid key.

Examples
--------

```js
const keyRangeValue = IDBKeyRange.bound("A", "K", false, false);

keyRangeValue.includes("F");
// Returns true

keyRangeValue.includes("W");
// Returns false
```

Specifications
--------------

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbkeyrange-includes① |

Browser compatibility
---------------------

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

See also
--------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction`
* Setting a range of keys: `IDBKeyRange`
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (View the example live).


ImageTrackList: length property - Web APIs

ImageTrackList: length property
===============================

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:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`length`** property of the `ImageTrackList` interface returns the length of the `ImageTrackList`.

Value
-----

An integer.

Examples
--------

The following example prints the value of `length` to the console.

```js
let tracks = imageDecoder.tracks;
console.log(tracks.length);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-imagetracklist-length |

Browser compatibility
---------------------

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


ImageTrackList: selectedTrack property - Web APIs

ImageTrackList: selectedTrack property
======================================

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:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`selectedTrack`** property of the `ImageTrackList` interface returns an `ImageTrack` object representing the currently selected track.

Value
-----

An `ImageTrack` object.

Examples
--------

The following example returns the `selectedTrack` then prints it to the console.

```js
let track = imageDecoder.tracks.selectedTrack;
console.log(track);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-imagetracklist-selectedtrack |

Browser compatibility
---------------------

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


ImageTrackList: selectedIndex property - Web APIs

ImageTrackList: selectedIndex property
======================================

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:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`selectedIndex`** property of the `ImageTrackList` interface returns the `index` of the selected track.

Value
-----

An integer.

Examples
--------

The following example prints the value of `selectedIndex` to the console.

```js
let tracks = imageDecoder.tracks;
console.log(tracks.selectedIndex);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-imagetracklist-selectedindex |

Browser compatibility
---------------------

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


ImageTrackList: ready property - Web APIs

ImageTrackList: ready property
==============================

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:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

The **`ready`** property of the `ImageTrackList` interface returns a `Promise` that resolves when the `ImageTrackList` is populated with `tracks`.

Value
-----

A `Promise` that resolves with `undefined`.

Examples
--------

The following example prints the value of `ready` to the console, this will be `undefined` once the promise resolves.

```js
let tracks = imageDecoder.tracks;
let ready = await tracks.ready;
console.log(ready);
```

Specifications
--------------

| Specification |
| --- |
| WebCodecs # dom-imagetracklist-ready |

Browser compatibility
---------------------

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


KeyboardEvent: ctrlKey property - Web APIs

KeyboardEvent: ctrlKey property
===============================

 The **`KeyboardEvent.ctrlKey`** read-only property returns a
 boolean value that indicates if the `control` key was pressed
 (`true`) or not (`false`) when the event occurred.

Value
-----

A boolean value.

Examples
--------

```html
<html lang="en">
  <head>
    <title>ctrlKey example</title>
    <script>
 function showChar(e) {
 alert(`Key Pressed: ${e.key}\nCTRL key pressed: ${e.ctrlKey}\n`);
 }
 </script>
  </head>
  <body onkeypress="showChar(event);">
    <p>
      Press any character key, with or without holding down the CTRL key.<br />
      You can also use the SHIFT key together with the CTRL key.
    </p>
  </body>
</html>
```

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-ctrlkey |

Browser compatibility
---------------------

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

See also
--------

* `KeyboardEvent`


KeyboardEvent: key property - Web APIs

KeyboardEvent: key property
===========================

The `KeyboardEvent` interface's **`key`** read-only property returns the value of the key pressed by the user, taking into consideration the state of modifier keys such as `Shift` as well as the keyboard locale and layout.

Value
-----

A string.

Its value is determined as follows:

* If the pressed key has a printed representation, the returned value is a non-empty Unicode character string containing the printable representation of the key.
* If the pressed key is a `Space` key, the returned value is a single space.
* If the pressed key is a control or special character, the returned value is one of the pre-defined key values.
* If the `KeyboardEvent` represents the press of a dead key, the key value must be "`Dead`".
* Some specialty keyboard keys (such as the extended keys for controlling media on multimedia keyboards) don't generate key codes on Windows; instead, they trigger `WM_APPCOMMAND` events. These events get mapped to DOM keyboard events, and are listed among the "Virtual key codes" for Windows, even though they aren't actually key codes.
* If the key cannot be identified, the returned value is `Unidentified`.

See a full list of key values.

KeyboardEvent sequence
----------------------

Every `KeyboardEvent` is fired in a pre-determined sequence. For a given key press, the sequence of `KeyboardEvent`s fired is as follows assuming that `Event.preventDefault` is not called:

1. A `keydown` event is first fired. If the key is held down further and the key produces a character key, then the event continues to be emitted in a platform implementation dependent interval and the `KeyboardEvent.repeat` read only property is set to `true`.
2. If the key produces a character key that would result in a character being inserted into possibly an `<input>`, `<textarea>` or an element with `HTMLElement.contentEditable` set to true, the `beforeinput` and `input` event types are fired in that order. Note that some other implementations may fire `keypress` event if supported. The events will be fired repeatedly while the key is held down.
3. A `keyup` event is fired once the key is released. This completes the process.

In sequence 1 & 3, the `KeyboardEvent.key` attribute is defined and is set appropriately to a value according to the rules defined earlier.

KeyboardEvent sequence example
------------------------------

Consider the event sequence generated when we interact with the `Shift` and the `2` key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.

Try experimenting using the following two test cases:

1. Press and hold the
 `Shift`
 key, then press
 `2`
 and release it. Next, release the
 `Shift`
 key.
2. Press and hold the
 `Shift`
 key, then press and hold
 `2`
 . Release the
 `Shift`
 key. Finally, release
 `2`
 .
### HTML

```html
<div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-reset" id="btn-reset">Reset</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>
```

### CSS

```css
.fx {
  -webkit-display: flex;
  display: flex;
  margin-left: -20px;
  margin-right: -20px;
}

.fx > div {
  padding-left: 20px;
  padding-right: 20px;
}

.fx > div:first-child {
  width: 30%;
}

.flex {
  -webkit-flex: 1;
  flex: 1;
}

#test-target {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}
```

### JavaScript

```js
let textarea = document.getElementById("test-target"),
  consoleLog = document.getElementById("console-log"),
  btnReset = document.getElementById("btn-reset");

function logMessage(message) {
  consoleLog.innerHTML += `${message}<br>`;
}

textarea.addEventListener("keydown", (e) => {
  if (!e.repeat) {
    logMessage(`Key "${e.key}" pressed [event: keydown]`);
  } else {
    logMessage(`Key "${e.key}" repeating [event: keydown]`);
  }
});

textarea.addEventListener("beforeinput", (e) => {
  logMessage(`Key "${e.data}" about to be input [event: beforeinput]`);
});

textarea.addEventListener("input", (e) => {
  logMessage(`Key "${e.data}" input [event: input]`);
});

textarea.addEventListener("keyup", (e) => {
  logMessage(`Key "${e.key}" released [event: keyup]`);
});

btnReset.addEventListener("click", (e) => {
  let child = consoleLog.firstChild;
  while (child) {
    consoleLog.removeChild(child);
    child = consoleLog.firstChild;
  }
  textarea.value = "";
});
```

### Result

**Note:** On browsers that don't fully implement the `InputEvent` interface which is used for the `beforeinput` and `input` events, you may get incorrect output on those lines of the log output.

### Case 1

When the shift key is pressed, a `keydown` event is first fired, and the `key` property value is set to the string `Shift`. As we keep holding this key, the `keydown` event does not continue to fire repeatedly because it does not produce a character key.

When `key 2` is pressed, another `keydown` event is fired for this new key press, and the `key` property value for the event is set to the string `@` for the U.S keyboard type and `"` for the UK keyboard type, because of the active modifier `shift` key. The `beforeinput` and `input` events are fired next because a character key has been produced.

As we release the `key 2`, a `keyup` event is fired and the `key` property will maintain the string values `@` and `"` for the different keyboard layouts respectively.

As we finally release the `shift` key, another `keyup` event is fired for it, and the key attribute value remains `Shift`.

### Case 2

When the shift key is pressed, a `keydown` event is first fired, and the `key` property value is set to be the string `Shift`. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.

When `key 2` is pressed, another `keydown` event is fired for this new key press, and the `key` property value for the event is set to be the string `@` for the U.S keyboard type and `"` for the UK keyboard type, because of the active modifier `shift` key. The `beforeinput` and `input` events are fired next because a character key has been produced. As we keep holding the key, the `keydown` event continues to fire repeatedly and the `KeyboardEvent.repeat` property is set to `true`. The `beforeinput` and `input` events are fired repeatedly as well.

As we release the `shift` key, a `keyup` event is fired for it, and the key attribute value remains `Shift`. At this point, notice that the `key` property value for the repeating keydown event of the `key 2` key press is now "2" because the modifier `shift` key is no longer active. The same goes for the `InputEvent.data` property of the `beforeinput` and `input` events.

As we finally release the `key 2`, a `keyup` event is fired but the `key` property will be set to the string value `2` for both keyboard layouts because the modifier `shift` key is no longer active.

Examples
--------

This example uses `EventTarget.addEventListener()` to listen for `keydown` events. When they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).

```js
window.addEventListener(
  "keydown",
  (event) => {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }

    switch (event.key) {
      case "ArrowDown":
        // Do something for "down arrow" key press.
        break;
      case "ArrowUp":
        // Do something for "up arrow" key press.
        break;
      case "ArrowLeft":
        // Do something for "left arrow" key press.
        break;
      case "ArrowRight":
        // Do something for "right arrow" key press.
        break;
      case "Enter":
        // Do something for "enter" or "return" key press.
        break;
      case " ":
        // Do something for "space" key press.
        break;
      case "Escape":
        // Do something for "esc" key press.
        break;
      default:
        return; // Quit when this doesn't handle the key event.
    }

    // Cancel the default action to avoid it being handled twice
    event.preventDefault();
  },
  true,
);
```

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-key |

Browser compatibility
---------------------

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


KeyboardEvent: repeat property - Web APIs

KeyboardEvent: repeat property
==============================

 The **`repeat`** read-only property of the
 `KeyboardEvent` interface returns a boolean value that is
 `true` if the given key is being held down such that it is automatically
 repeating.

Value
-----

A boolean value.

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-repeat |

Browser compatibility
---------------------

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


KeyboardEvent: altKey property - Web APIs

KeyboardEvent: altKey property
==============================

 The **`KeyboardEvent.altKey`** read-only property is a
 boolean value that indicates if the `alt` key (`Option` or `⌥` on macOS) was pressed (`true`) or not (`false`) when
 the event occurred.

Value
-----

A boolean value.

Examples
--------

```html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>altKey example</title>

    <script>
 function showChar(e) {
 alert(
 "Key KeyDown: " +
 String.fromCharCode(e.charCode) +
 "\n" +
 "charCode: " +
 e.charCode +
 "\n" +
 "ALT key KeyDown: " +
 e.altKey +
 "\n",
 );
 }
 </script>
  </head>

  <body onkeydown="showChar(event);">
    <p>
      Press any character key, with or without holding down the ALT key.<br />
      You can also use the SHIFT key together with the ALT key.
    </p>
  </body>
</html>
```

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-altkey |

Browser compatibility
---------------------

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

See also
--------

* `KeyboardEvent`


KeyboardEvent: isComposing property - Web APIs

KeyboardEvent: isComposing property
===================================

 The **`KeyboardEvent.isComposing`** read-only property returns
 a boolean value indicating if the event is fired within a composition
 session, i.e. after `compositionstart`
 and before `compositionend`.

Value
-----

A boolean.

Examples
--------

```js
const kbdEvent = new KeyboardEvent("syntheticKey", false);
console.log(kbdEvent.isComposing); // return false
```

Specifications
--------------

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

Browser compatibility
---------------------

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

See also
--------

* `compositionstart` and `compositionend`
* `KeyboardEvent`


KeyboardEvent: keyIdentifier property - Web APIs

KeyboardEvent: keyIdentifier property
=====================================

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

The deprecated **`KeyboardEvent.keyIdentifier`** read-only property returns a "key identifier" string that can be used to determine what key was pressed. Its non-deprecated replacement is `KeyboardEvent.key`.

Specifications
--------------

*Not part of any current specification.* This property was part of an old draft of the DOM Level 3 Events Specification, but it was removed in later drafts in favor of `KeyboardEvent.key`.

Browser compatibility
---------------------

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


KeyboardEvent: initKeyboardEvent() method - Web APIs

KeyboardEvent: initKeyboardEvent() method
=========================================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

 The **`KeyboardEvent.initKeyboardEvent()`** method initializes
 the attributes of a keyboard event object. This method was introduced in draft of DOM
 Level 3 Events, but deprecated in newer draft. Gecko won't support this feature since
 implementing this method as experimental broke existing web apps (see Firefox bug 999645).
 Web applications should use constructor instead of this if it's available.

Syntax
------

```js
initKeyboardEvent(type, canBubble, cancelable,
                  view, key, location, ctrlKey,
                  altKey, shiftKey, metaKey)
```

### Parameters

`type`

 The type of keyboard event; browsers always set it to one of `keydown`,
 `keypress`, or `keyup`.

`canBubble` Optional

Indicates whether or not the event can bubble. Defaults to `false`.

`cancelable` Optional

Indicates whether or not the event can be canceled. Defaults to `false`.

`view` Optional

The WindowProxy it is associated to. Defaults to `null`.

`key` Optional

The value of the key attribute. Defaults to `""`.

`location` Optional

The value of the location attribute. Defaults to `0`.

`ctrlKey` Optional

Indicates whether the control key modifier is active. Defaults to `false`.

`altKey` Optional

Indicates whether the alt key modifier is active. Defaults to `false`.

`shiftKey` Optional

Indicates whether the shift key modifier is active. Defaults to `false`.

`metaKey` Optional

Indicates whether the meta key modifier is active. Defaults to `false`.

### Return value

None (`undefined`).

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-initkeyboardevent |

The `KeyboardEvent` interface specification went through numerous draft versions, first under DOM Events Level 2 where it was dropped as no consensus arose, then under DOM Events Level 3. This led to the implementation of non-standard initialization methods, the early DOM Events Level 2 version, `KeyboardEvent.initKeyEvent()` by Gecko browsers and the early DOM Events Level 3 version, `KeyboardEvent.initKeyboardEvent()` by others. Both have been superseded by the modern usage of a constructor: `KeyboardEvent()`.

Browser compatibility
---------------------

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


KeyboardEvent: getModifierState() method - Web APIs

KeyboardEvent: getModifierState() method
========================================

 The **`KeyboardEvent.getModifierState()`** method returns the
 current state of the specified modifier key: `true` if the modifier is active
 (that is the modifier key is pressed or locked), otherwise, `false`.

Syntax
------

```js
getModifierState(key)
```

### Parameters

`key`

 A modifier key value. The value must be one of the `KeyboardEvent.key`
 values which represent modifier keys, or the string `"Accel"`

Deprecated
. This is case-sensitive.

### Return value

A boolean.

Modifier keys on Firefox
------------------------

When `getModifierState()` returns true on Firefox?

|  | Windows | Linux (GTK) | Mac | Android 2.3 | Android 3.0 or later |
| --- | --- | --- | --- | --- | --- |
| `"Alt"` | Either `Alt` key or `AltGr` key pressed | `Alt` key pressed | `⌥ Option` key pressed | `Alt` key or `option` key pressed |
| `"AltGraph"` |
 Both `Alt` and `Ctrl` keys are pressed, or
 `AltGr` key is pressed
  | `Level 3 Shift` key (or `Level 5 Shift` key) pressed | `⌥ Option` key pressed | ❌ *Not supported* | ❌ *Not supported* |
| `"CapsLock"` | During LED for `⇪ Caps Lock` turned on | ❌ *Not supported* | While `CapsLock` is locked |
| `"Control"` | Either `Ctrl` key or `AltGr` key pressed | `Ctrl` key pressed | `control` key pressed | `menu` key pressed. | `Ctrl` key, `control` key or `menu` key
 pressed.
  |
| `"Fn"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | `Function` key is pressed, but we're not sure what key makes
 the modifier state active. `Fn` key on Mac keyboard doesn't
 cause this active.
  |
| `"FnLock"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |
| `"Hyper"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |
| `"Meta"` | `⊞ Windows Logo` key pressed (from Firefox 118) | `Meta` key pressed | `⌘ Command` key pressed | ❌ *Not supported* | `⊞ Windows Logo` key or `command` key pressed |
| `"NumLock"` | During LED for `Num Lock` turned on | A key on numpad pressed | ❌ *Not supported* | While `NumLock` is locked |
| `"OS"` | `⊞ Windows Logo` key pressed (before Firefox 118) | `Super` key or `Hyper` key pressed (typically, mapped
 to `⊞ Windows Logo` key)
  | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |
| `"ScrollLock"` | During LED for `Scroll Lock` turned on |
 During LED for `Scroll Lock` turned on, but typically this
 isn't supported by platform
  | ❌ *Not supported* | ❌ *Not supported* | While `ScrollLock` is locked |
| `"Shift"` | `⇧ Shift` key pressed |
| `"Super"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |
| `"Symbol"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |
| `"SymbolLock"` | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* | ❌ *Not supported* |

* On the other platforms, "Alt", "Control" and "Shift" may be supported.
* All modifiers (except `"FnLock"`, `"Hyper"`, `"Super"` and `"Symbol"` which are defined after Firefox implements this) are always supported for untrusted events on Firefox.
 This doesn't depend on the platform.
`"Accel"` virtual modifier
--------------------------

**Note:** The `"Accel"` virtual modifier has
 been effectively **deprecated** in current drafts of the DOM3 Events
 specification.

`getModifierState()` also accepts a deprecated virtual modifier named
 `"Accel"`. `event.getModifierState("Accel")` returns
 `true` when at least one of `KeyboardEvent.ctrlKey` or
 `KeyboardEvent.metaKey` is `true`.

 In old implementations and outdated specifications, it returned `true` when
 a modifier which is the typical modifier key for the shortcut key is pressed. For
 example, on Windows, pressing `Ctrl` key may make it return `true`.
 However, on Mac, pressing `⌘ Command` key may make it return `true`.
 Note that which modifier key makes it return true depends on platforms, browsers, and
 user settings. For example, Firefox users can customize this with a pref,
 `"ui.key.accelKey"`.

Examples
--------

```js
function handleKeyboardEvent(event) {
  // Ignore if following modifier is active.
  if (
    event.getModifierState("Fn") ||
    event.getModifierState("Hyper") ||
    event.getModifierState("OS") ||
    event.getModifierState("Super") ||
    event.getModifierState("Win") /\* hack for IE \*/
  ) {
    return;
  }

  // Also ignore if two or more modifiers except Shift are active.
  if (
    event.getModifierState("Control") +
      event.getModifierState("Alt") +
      event.getModifierState("Meta") >
    1
  ) {
    return;
  }

  // Handle shortcut key with standard modifier
  if (event.getModifierState("Accel")) {
    switch (event.key.toLowerCase()) {
      case "c":
        if (event.getModifierState("Shift")) {
          // Handle Accel + Shift + C
          event.preventDefault(); // consume the key event
        }
        break;
      case "k":
        if (!event.getModifierState("Shift")) {
          // Handle Accel + K
          event.preventDefault(); // consume the key event
        }
        break;
    }
    return;
  }

  // Do something different for arrow keys if ScrollLock is locked.
  if (
    (event.getModifierState("ScrollLock") ||
      event.getModifierState("Scroll")) /\* hack for IE \*/ &&
    !event.getModifierState("Control") &&
    !event.getModifierState("Alt") &&
    !event.getModifierState("Meta")
  ) {
    switch (event.key) {
      case "ArrowDown":
      case "Down": // hack for IE and old Firefox
        event.preventDefault(); // consume the key event
        break;
      case "ArrowLeft":
      case "Left": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
      case "ArrowRight":
      case "Right": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
      case "ArrowUp":
      case "Up": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
    }
  }
}
```

**Note:** Although this example uses `.getModifierState()` with `"Alt"`,
 `"Control"`, `"Meta"` and `"Shift"`, using
 `event.altKey`, `event.ctrlKey`, `event.metaKey` and
 `event.shiftKey` may be more preferable.

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-getmodifierstate |

Browser compatibility
---------------------

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

See also
--------

* The `KeyboardEvent` this method belongs to.
* `MouseEvent.getModifierState`


KeyboardEvent: KeyboardEvent() constructor - Web APIs

KeyboardEvent: KeyboardEvent() constructor
==========================================

 The **`KeyboardEvent()`** constructor creates a new
 `KeyboardEvent` object.

Syntax
------

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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `keydown`, `keyup`, or `keypress`.

`options` Optional

An object that, *in addition of the properties defined in `UIEvent()`*, can have the following properties:

`key` Optional

A string, defaulting to `""`, that sets the value of `KeyboardEvent.key`.

`code` Optional

A string, defaulting to `""`, that sets the value of `KeyboardEvent.code`.

`location` Optional

A string, defaulting to `0`, that sets the value of `KeyboardEvent.location`.

`repeat` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.repeat`.

`isComposing` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.isComposing`.

`charCode` Optional
Deprecated

A number, defaulting to `0`, that sets the value of the deprecated `KeyboardEvent.charCode`.

`keyCode` Optional
Deprecated

A number, defaulting to `0`, that sets the value of the deprecated `KeyboardEvent.keyCode`.

`which` Optional
Deprecated

A number, defaulting to `0`, that sets the value of the deprecated `UIEvent.which`.

`ctrlKey` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.ctrlKey`.

`shiftKey` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.shiftKey`.

`altKey` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.altKey`.

`metaKey` Optional

A boolean value, defaulting to `false`, that sets the value of `KeyboardEvent.metaKey`.

### Return value

A new `KeyboardEvent` object.

Specifications
--------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-keyboardevent |

Browser compatibility
---------------------

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

See also
--------

* `KeyboardEvent`, the interface of the objects it constructs.