recursal/MDN huggingface dataset:
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
=======================================

 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
==============================

 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
===============================

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
======================================

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
======================================

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
==============================

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
===============================

 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: 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
==============================

 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
===================================

 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
=====================================

**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
=========================================

**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: 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.
KeyboardEvent: shiftKey property
================================

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

Value
-----

A boolean value.

Examples
--------


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

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

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

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

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

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

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

See also
--------

* `KeyboardEvent`
KeyboardEvent: charCode property
================================

**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 **`charCode`** read-only property of the
 `KeyboardEvent` interface returns the Unicode value of a character key
 pressed during a `keypress` event.


**Warning:** Do not use this property, as it is deprecated. Instead, get the
 Unicode value of the character using the `key`
 property.


Value
-----

A number that represents the Unicode value of the character key that was pressed.

Examples
--------

### HTML


```html
<p>Type anything into the input box below to log a <code>charCode</code>.</p>
<input type="text" />
<p id="log"></p>
```

### JavaScript


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

input.addEventListener("keypress", (e) => {
  log.innerText = `Key pressed: ${String.fromCharCode(e.charCode)}\ncharCode: ${
 e.charCode
 }`;
});
```

### Result

Notes
-----

* In a `keypress` event, the Unicode value of the key pressed is stored in
 either the `keyCode` or `charCode`
 property, but never both. If the key pressed generates a character (e.g., 'a'),
 `charCode` is set to the code of that character; `charCode`
 respects the letter case (in other words, `charCode` takes into account
 whether the
 `shift`
 key is held down). Otherwise, the code of the pressed key
 is stored in `keyCode`.
* When one or more modifier keys are pressed, there are some complex rules for
 `charCode`. See Gecko Keypress Event
 for details.
* `charCode` is never set in the `keydown` and
 `keyup` events. In these cases, `keyCode` is set instead.
* To get the code of the key regardless of whether it was stored in
 `keyCode` or `charCode`, query the `which` property.
* Characters entered through an IME do not register through `keyCode` or
 `charCode`.
* For a list of the `charCode` values associated with particular keys, run
 Example 7: Displaying Event Object Properties and view the resulting HTML table.
Specifications
--------------

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

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

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