recursal/MDN huggingface dataset:
HTMLElement: inputMode property
===============================

The `HTMLElement` property **`inputMode`** reflects the value of the element's `inputmode` attribute.

It provides a hint about the type of data that might be entered by the user while editing the element or its contents. This allows the browser to display an appropriate virtual keyboard.

It is used primarily on `<input>` elements, but is usable on any element in `contenteditable` mode.

Value
-----

This attribute may have one of the following values:

`decimal`

Fractional numeric input keyboard that contains the digits and decimal separator for the user's locale (typically `.` or `,`).

`email`

 A virtual keyboard optimized for entering email addresses.
 Typically includes the `@`character as well as other optimizations.


`none`

No virtual keyboard. This is used when the page implements its own keyboard input control.

`numeric`

 Numeric input keyboard that only requires the digits 0–9.
 Devices may or may not show a minus key.


`search`

 A virtual keyboard optimized for search input.
 For instance, the return/submit key may be labeled "Search".


`tel`

A telephone keypad input that includes the digits 0–9, the asterisk (`\*`), and the pound (`#`) key.

`text`

Standard input keyboard for the user's current locale.

`url`

 A keypad optimized for entering URLs.
 This may have the `/` key more prominent, for example.


For details on the usage of this attribute, see the page for the `inputmode` HTML attribute that this property reflects.

Examples
--------

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

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

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

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

See also
--------

* inputmode attribute
HTMLElement: enterKeyHint property
==================================

 The **`enterKeyHint`** property is an enumerated property defining
 what action label (or icon) to present for the enter key on virtual keyboards.
 It reflects the `enterkeyhint`
 HTML global attribute and is an enumerated property, only accepting the following values
 as a string:

* `'enter'` typically indicating inserting a new line.
* `'done'` typically meaning there is nothing more to input and the input method editor (IME) will be closed.
* `'go'` typically meaning to take the user to the target of the text they typed.
* `'next'` typically taking the user to the next field that will accept text.
* `'previous'` typically taking the user to the previous field that will accept text.
* `'search'` typically taking the user to the results of searching for the text they have typed.
* `'send'` typically delivering the text to its target.

If no `enterKeyHint` value has been specified or if it was set to a different value than the allowed ones, it will return an empty string.

Examples
--------

Give a virtual keyboard a hint how to label the enter key (might render as `Send` and `Search`, depending on the OS or the user's language).


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

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

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

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

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

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

See also
--------

* `enterkeyhint` HTML global attribute
HTMLElement: beforetoggle event
===============================

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
The **`beforetoggle`** event of the `HTMLElement` interface fires on a popover element (i.e. one that has a valid `popover` attribute) just before it is shown or hidden.

* If the popover is transitioning from hidden to showing, the `event.oldState` property will be set to `closed` and the `event.newState` property will be set to `open`.
* If the popover is transitioning from showing to hidden, then `event.oldState` will be `open` and `event.newState` will be `closed`.
Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

A `ToggleEvent`. Inherits from `Event`.

Event

ToggleEventExamples
--------

### Basic example


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

// ...

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

### A note on toggle event coalescing

It is worth pointing out that `beforetoggle` events are coalesced, meaning that if multiple `beforetoggle` events are fired before the event loop has a chance to cycle, only a single event will be fired.

For example:


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

popover.showPopover();
popover.hidePopover();
// `beforetoggle` only fires once
```

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

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

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

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

See also
--------

* `popover` HTML global attribute
* Popover API
* Related event: `toggle`
HTMLElement: innerText property
===============================

The **`innerText`** property of the `HTMLElement` interface represents the rendered text content of a node and its descendants.

 As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
 As a setter this will replace the element's children with the given value, converting any line breaks into `<br>` elements.


**Note:** `innerText` is easily confused with `Node.textContent`, but there are important differences between the two.
 Basically, `innerText` is aware of the rendered appearance of text, while `textContent` is not.


Value
-----

A string representing the rendered text content of an element.

If the element itself is not being rendered (for example, is detached from the document or is hidden from view), the returned value is the same as the `Node.textContent` property.

**Warning:** Setting `innerText` on a node removes *all* of the node's children
 and replaces them with a single text node with the given string value.


Examples
--------

 This example compares `innerText` with `Node.textContent`.
 Note how `innerText` is aware of things like `<br>` elements, and ignores hidden elements.

### HTML


```html
<h3>Source element:</h3>
<p id="source">
  <style>
 #source {
 color: red;
 }
 #text {
 text-transform: uppercase;
 }
 </style>
  <span id="text">
    Take a look at<br />
    how this text<br />
    is interpreted below.
  </span>
  <span style="display:none">HIDDEN TEXT</span>
</p>
<h3>Result of textContent:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>…</textarea>
<h3>Result of innerText:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>…</textarea>
```

### JavaScript


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

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

### Result

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

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

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

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

See also
--------

* `HTMLElement.outerText`
* `Element.innerHTML`
HTMLElement: lang property
==========================

 The **`HTMLElement.lang`** property gets or sets the base
 language of an element's attribute values and text content.

 The language code returned by this property is defined in RFC 5646: Tags for Identifying Languages (also known as BCP 47).
 Common examples include "en" for English, "ja" for
 Japanese, "es" for Spanish and so on. The default value of this attribute is
 `unknown`. Note that this attribute, though valid at the individual element
 level described here, is most often specified for the root element of the document.

 This also only works with the `lang` attribute and not with
 `xml:lang`.

Value
-----

A string.

Examples
--------


```js
// this snippet compares the base language and
// redirects to another URL based on language
if (document.documentElement.lang === "en") {
  window.location.href = "Some\_document.html.en";
} else if (document.documentElement.lang === "ru") {
  window.location.href = "Some\_document.html.ru";
}
```

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

| Specification |
| --- |
| HTML Standard # dom-lang |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
XREquirectLayer: upperVerticalAngle property
============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`upperVerticalAngle`** property of the `XREquirectLayer` interface represents the upper vertical angle in radians for the sphere.

Value
-----

A number representing the upper vertical angle in radians for the sphere. Setting `upperVerticalAngle` to a value less than -π/2 will set it to -π/2 and setting it to a value higher than π/2 will set it to π/2.

Examples
--------

### Getting a layer's upper vertical angle

The `XRWebGLBinding.createEquirectLayer()` method creates an equirect layer and allows specifying a `upperVerticalAngle`. The `XREquirectLayer.upperVerticalAngle` property can be used after layer creation to get the upper vertical angle used or to set it to a new one.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralHorizontalAngle: 2 \* Math.PI,
  upperVerticalAngle: Math.PI / 2.0,
  lowerVerticalAngle: -Math.PI / 2.0,
  radius: 0,
});

equirectLayer.upperVerticalAngle; // 1.5707963267948966
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-upperverticalangle |

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

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

See also
--------

* `XREquirectLayer.radius`
* `XREquirectLayer.centralHorizontalAngle`
* `XREquirectLayer.lowerVerticalAngle`
XREquirectLayer: centralHorizontalAngle property
================================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`centralHorizontalAngle`** property of the `XREquirectLayer` interface represents the central horizontal angle in radians for the sphere.

Value
-----

A number representing the central horizontal angle in radians for the sphere. Setting `centralHorizontalAngle` to a value less than 0 will set it to 0 and setting it to a value higher than 2π will set it to 2π.

Examples
--------

### Getting a layer's central horizontal angle

The `XRWebGLBinding.createEquirectLayer()` method creates an equirect layer and allows specifying a `centralHorizontalAngle`. The `XREquirectLayer.centralHorizontalAngle` property can be used after layer creation to get the central horizontal angle used or to set it to a new one.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralHorizontalAngle: 2 \* Math.PI,
  upperVerticalAngle: Math.PI / 2.0,
  lowerVerticalAngle: -Math.PI / 2.0,
  radius: 0,
});

equirectLayer.centralHorizontalAngle; // 6.283185307179586
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-centralhorizontalangle |

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

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

See also
--------

* `XREquirectLayer.radius`
* `XREquirectLayer.lowerVerticalAngle`
* `XREquirectLayer.upperVerticalAngle`
XREquirectLayer: lowerVerticalAngle property
============================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`lowerVerticalAngle`** property of the `XREquirectLayer` interface represents the lower vertical angle in radians for the sphere.

Value
-----

A number representing the lower vertical angle in radians for the sphere. Setting `lowerVerticalAngle` to a value less than -π/2 will set it to -π/2 and setting it to a value higher than π/2 will set it to π/2.

Examples
--------

### Getting a layer's lower vertical angle

The `XRWebGLBinding.createEquirectLayer()` method creates an equirect layer and allows specifying a `lowerVerticalAngle`. The `XREquirectLayer.lowerVerticalAngle` property can be used after layer creation to get the lower vertical angle used or to set it to a new one.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralHorizontalAngle: 2 \* Math.PI,
  upperVerticalAngle: Math.PI / 2.0,
  lowerVerticalAngle: -Math.PI / 2.0,
  radius: 0,
});

equirectLayer.lowerVerticalAngle; // -1.5707963267948966
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-lowerverticalangle |

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

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

See also
--------

* `XREquirectLayer.radius`
* `XREquirectLayer.centralHorizontalAngle`
* `XREquirectLayer.upperVerticalAngle`
XREquirectLayer: transform property
===================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`transform`** property of the `XREquirectLayer` interface represents the offset and orientation relative to the layer's `space`.

Value
-----

An `XRRigidTransform`.

Examples
--------

### Setting the equirect layer's position

This example code positions the layer two meters away from the origin of `xrReferenceSpace`.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

equirectLayer.transform = new XRRigidTransform({ z: -2 });
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-transform |

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

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

See also
--------

* `XRRigidTransform`
* `XREquirectLayer.space`
XREquirectLayer: space property
===============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`space`** property of the `XREquirectLayer` interface represents the layer's spatial relationship with the user's physical environment.

Value
-----

An `XRSpace`.

Examples
--------

### Updating the equirect layer's space

The `XRWebGLBinding.createEquirectLayer()` method creates an equirect layer and requires a `space` property to be provided. The `XREquirectLayer.space` property can be used after layer creation to get the space used or to set it to a new one.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

equirectLayer.space = someOtherSpace;
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-space |

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

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

See also
--------

* `XRSpace`
* `XRWebGLBinding.createEquirectLayer()`
XREquirectLayer: radius property
================================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The **`radius`** property of the `XREquirectLayer` interface represents the radius of the sphere.

Value
-----

A number representing the non-negative radius (in meters) of the sphere. Values of zero or infinity are treated as representing an infinite sphere. Setting `radius` to a value less than 0 will set it to 0.

Examples
--------

### Getting a layer's radius

The `XRWebGLBinding.createEquirectLayer()` method creates an equirect layer and allows specifying a `radius`. The `XREquirectLayer.radius` property can be used after layer creation to get the radius used or to set it to a new one.


```js
const equirectLayer = xrGlBinding.createEquirectLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 1200,
  viewPixelHeight: 600,
  centralHorizontalAngle: 2 \* Math.PI,
  upperVerticalAngle: Math.PI / 2.0,
  lowerVerticalAngle: -Math.PI / 2.0,
  radius: 0,
});

equirectLayer.radius; // 0
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # dom-xrequirectlayer-radius |

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

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

See also
--------

* `XREquirectLayer.centralHorizontalAngle`
* `XREquirectLayer.lowerVerticalAngle`
* `XREquirectLayer.upperVerticalAngle`
XREquirectLayer: redraw event
=============================

**Experimental:** **This is an experimental technology**  
Check the Browser compatibility table carefully before using this in production.

The `redraw` event is sent to the `XREquirectLayer` object when the underlying resources of the layer are lost or when the XR Compositor can no longer reproject the layer. If this event is sent, authors should redraw the content of the layer in the next XR animation frame.

See also the `XRCompositionLayer.needsRedraw` property which is also available to `XREquirectLayer` objects through inheritance from `XRCompositionLayer`.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


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

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

Event type
----------

An `XRLayerEvent`. Inherits from `Event`.

Event properties
----------------

*In addition to the properties listed below, properties from the parent interface, `Event`, are available.*

`layer` Read only 

The `XRLayer` which generated the event.

Examples
--------

### Using the `redraw` event

You can pass `redraw` to `addEventListener()`:


```js
equirectLayer.addEventListener("redraw", (event) => {
  // redraw the layer
});
```


Alternatively, you can use the `onredraw` event handler property to establish a handler for the `redraw` event:


```js
equirectLayer.onredraw = (event) => {
  // redraw the layer
};
```

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

| Specification |
| --- |
| WebXR Layers API Level 1 # eventdef-xrlayer-redraw |

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

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

See also
--------

* `XRCompositionLayer.needsRedraw`
BackgroundFetchUpdateUIEvent: BackgroundFetchUpdateUIEvent() constructor
========================================================================

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 **`BackgroundFetchUpdateUIEvent()`** constructor creates a new `BackgroundFetchUpdateUIEvent` object. This constructor is not typically used as the browser creates these objects itself and provides them to background fetch event callbacks.

Syntax
------


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

### Parameters

`type`

 A string with the name of the event.
 It is case-sensitive and browsers set it to `backgroundfetchsuccess` or `backgroundfetchfail`.


`options`

An object that, *in addition of the properties defined in `ExtendableEvent()`*, has the following properties:

`registration`

A `BackgroundFetchRegistration` object.


### Return value

A new `BackgroundFetchUpdateUIEvent` object.

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

| Specification |
| --- |
| Background Fetch # dom-backgroundfetchupdateuievent-backgroundfetchupdateuievent |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
BackgroundFetchUpdateUIEvent: updateUI() method
===============================================

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 **`updateUI()`** method of the `BackgroundFetchUpdateUIEvent` interface updates the title and icon in the user interface to show the status of a background fetch.

This method may only be run once, to notify the user on a failed or a successful fetch.

Syntax
------


```js
updateUI(options)
```

### Parameters

`options` Optional

An object containing any of the following:

`icons` Optional

A list of one or more image resources, containing icons for use in the user interface. An image resource is an object containing:

`src`

A string which is a URL of an image.

`sizes` Optional

A string which is equivalent to a `<link>` `sizes` attribute.

`type` Optional

A string containing an image MIME type.

`label` Optional

A string providing a name for the associated image.


`title` Optional

A string containing the new title of the user interface.


### Return value

A `Promise`.

### Exceptions

`InvalidStateError` `DOMException`

Returned if any of the following are true:

* The `isTrusted` property is `false`.
* The `BackgroundFetchUpdateUIEvent` UI updated flag is already set, indicating that the `updateUI()` method has already been called.
* The `BackgroundFetchUpdateUIEvent` is not active.

Examples
--------

The following example demonstrates updating the UI with a title and image icon on a successful fetch.


```js
addEventListener("backgroundfetchsuccess", (event) => {
  event.updateUI({
    title: "Episode 5 ready to listen!",
    icon: {
      src: "path/to/success.ico",
      sizes: "16x16 32x32 64x64",
    },
  });
});
```

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

| Specification |
| --- |
| Background Fetch # background-fetch-update-ui-event-update-ui |

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

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