recursal/MDN huggingface dataset:
HTMLInputElement: select event
==============================

The **`select`** event fires when some text has been selected.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

### Selection logger


```html
<input value="Try selecting some text in this element." />
<p id="log"></p>
```



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

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

### onselect equivalent

You can also set up the event handler using the `onselect` property:


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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
HTMLInputElement: invalid event
===============================

The **`invalid`** event fires when a submittable element has been checked for validity and doesn't satisfy its constraints.

This event can be useful for displaying a summary of the problems with a form on submission. When a form is submitted, `invalid` events are fired at each form control that is invalid. The validity of submittable elements is checked before submitting their owner `<form>`, or after the `checkValidity()` method of the element or its owner `<form>` is called.

It is not checked on `blur`.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------

If a form is submitted with an invalid value, the submittable elements are checked and, if an error is found, the `invalid` event will fire on the `invalid` element. In this example, when an invalid event fires because of an invalid value in the input, the invalid value is logged.

### HTML


```html
<form action="#">
  <div>
    <label>
      Enter an integer between 1 and 10:
      <input type="number" min="1" max="10" required />
    </label>
  </div>
  <div><input type="submit" value="submit" /></div>
</form>
<hr />
Invalid values:
<ul id="log"></ul>
```

### JavaScript


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

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

### Result

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

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

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

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

See also
--------

* HTML `<form>` element
* Related event: `submit`
* CSS `:invalid` pseudo class
HTMLInputElement: webkitdirectory property
==========================================

 The **`HTMLInputElement.webkitdirectory`** is a property
 that reflects the `webkitdirectory` HTML attribute
 and indicates that the `<input>` element should let the user select directories instead of files.
 When a directory is selected, the directory and its entire hierarchy of contents are included in the set of selected items.
 The selected file system entries can be obtained using the `webkitEntries` property.


**Note:** This property is called `webkitEntries` in the specification due to its
 origins as a Google Chrome-specific API. It's likely to be renamed someday.


Value
-----

 A Boolean; `true` if the `<input>` element should allow
 picking only directories or `false` if only files should be selectable.

Understanding the results
-------------------------

 After the user makes a selection, each `File` object in `files`
 has its `File.webkitRelativePath` property set to the relative path within
 the selected directory at which the file is located. For example, consider this file
 system:

* PhotoAlbums
    + Birthdays
        - Jamie's 1st birthday
            * PIC1000.jpg
            * PIC1004.jpg
            * PIC1044.jpg
        - Don's 40th birthday
            * PIC2343.jpg
            * PIC2344.jpg
            * PIC2355.jpg
            * PIC2356.jpg
    + Vacations
        - Mars
            * PIC5533.jpg
            * PIC5534.jpg
            * PIC5556.jpg
            * PIC5684.jpg
            * PIC5712.jpg

 If the user chooses `PhotoAlbums`, then the list reported by files will
 contain `File` objects for every file listed above—but not the directories.
 The entry for `PIC2343.jpg` will have a `webkitRelativePath` of
 `PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg`. This makes it
 possible to know the hierarchy even though the `FileList` is flat.


**Note:** The behavior of `webkitRelativePath` is different
 in *Chromium < 72*. See this bug for
 further details.


Examples
--------

 In this example, a directory picker is presented which lets the user choose one or more
 directories. When the `change` event occurs, a list of all files contained
 within the selected directory hierarchies is generated and displayed.

### HTML


```html
<input type="file" id="filepicker" name="fileList" webkitdirectory multiple />
<ul id="listing"></ul>
```

### JavaScript


```js
document.getElementById("filepicker").addEventListener(
  "change",
  (event) => {
    let output = document.getElementById("listing");
    for (const file of event.target.files) {
      let item = document.createElement("li");
      item.textContent = file.webkitRelativePath;
      output.appendChild(item);
    }
  },
  false,
);
```

### Result

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

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

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

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

See also
--------

* File and Directory Entries API
* `HTMLInputElement.webkitEntries`
* `File.webkitRelativePath`
HTMLInputElement: search event
==============================

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

The **`search`** event is fired when a search is initiated using an `<input>` element of `type="search"`.

There are several ways a search can be initiated, such as by pressing `Enter` while the `<input>` is focused, or, if the `incremental` attribute is present, after a UA-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced).

Current UA implementations of `<input type="search">` have an additional control to clear the field. Using this control also fires the `search` event. In that case the `value` of the `<input>` element will be the empty string.

This event is not cancelable.

Syntax
------

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


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

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

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

A generic `Event`.

Examples
--------


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

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



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

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

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

This event is not part of any specification.

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

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

 The **`HTMLInputElement.select()`** method selects all the text
 in a `<textarea>` element or in an `<input>` element
 that includes a text field.

Syntax
------


```js
select()
```

### Parameters

None.

### Return value

None (`undefined`).

Examples
--------

 Click the button in this example to select all the text in the
 `<input>` element.

### HTML


```html
<input type="text" id="text-box" size="20" value="Hello world!" />
<button onclick="selectText()">Select text</button>
```

### JavaScript


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

### Result

Notes
-----

 Calling `element.select()` will not necessarily focus the input, so it is
 often used with `HTMLElement.focus`.

 In browsers where it is not supported, it is possible to replace it with a call to HTMLInputElement.setSelectionRange() with
 parameters 0 and the input's value length:


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

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

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

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

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

See also
--------

* `<input>`
* `<textarea>`
* `HTMLInputElement`
* `HTMLInputElement.setSelectionRange`
HTMLInputElement: setCustomValidity() method
============================================

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

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

* Learn more
* See full compatibility
* Report feedback
The **`HTMLInputElement.setCustomValidity()`** method sets a custom validity message for the element.

Syntax
------


```js
setCustomValidity(message)
```

### Parameters

`message`

The message to use for validity errors.

### Return value

None (`undefined`).

### Exceptions

None.

Examples
--------

 In this example, we pass the ID of an input element, and set different error messages
 depending on whether the value is missing, too low, or too high. Additionally you
 *must* call the `reportValidity()`
 method on the same element or else nothing will happen.


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

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

  input.reportValidity();
}
```


 It's vital to set the message to an empty string if there are no errors. As long as the
 error message is not empty, the form will not pass validation and will not be
 submitted.

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

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

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

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

See also
--------

* Learn: Client-side form validation
* Guide: Constraint validation
* `ValidityState`
HTMLInputElement: labels property
=================================

 The **`HTMLInputElement.labels`** read-only property returns a
 `NodeList` of the `<label>` elements associated with the
 `<input>` element, if the element is not hidden. If the element has the
 type `hidden`, the property returns `null`.

Value
-----

 A `NodeList` containing the `<label>` elements associated
 with the `<input>` element.

Examples
--------

### HTML


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

### JavaScript


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

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

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

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

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

The **`HTMLInputElement.disabled`** property is a boolean value that reflects the `disabled` HTML attribute, which indicates whether the control is disabled. If it is disabled, it does not accept clicks. A disabled element is unusable and un-clickable.

Value
-----

A boolean value.

Examples
--------

### HTML


```html
<p>
  <label>
    <input id="check-box" name="b" value="1" type="checkbox" disabled /> Check
    this box!
  </label>
</p>
<p>
  <label>
    <input id="toggle-box" name="b" value="2" type="checkbox" /> Enable the
    other checkbox.
  </label>
</p>
```

### JavaScript


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

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

### Result

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

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

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

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

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

 The **`onSubmittedWorkDone()`** method of the
 `GPUQueue` interface returns a `Promise` that resolves when all the work submitted to the GPU via this `GPUQueue` at the point the method is called has been processed.

This includes the completion of any `mapAsync()` calls made on `GPUBuffer`s used in commands submitted to the queue, before `onSubmittedWorkDone()` is called.

 Note: In most cases, you do *not* need to call `onSubmittedWorkDone()`. You do ***not*** need to call it for mapping a buffer. `mapAsync` guarantees work submitted
 to the queue before calling `mapAsync` happens before the `mapAsync` returns (see WebGPU spec: section 5.2)

The two use cases for `onSubmittedWorkDone`

1. Waiting for multiple buffer mapping (slow)

```js
// good
await Promise.all([
  buffer1.mapAsync(),
  buffer2.mapAsync(),
  buffer3.mapAsync(),
]);
data1 = buffer1.getMappedRange();
data2 = buffer2.getMappedRange();
data3 = buffer3.getMappedRange();
```



```js
// works but slow
buffer1.mapAsync();
buffer2.mapAsync();
buffer3.mapAsync();
await device.queue.onSubmittedWorkDone();
data1 = buffer1.getMappedRange();
data2 = buffer2.getMappedRange();
data3 = buffer3.getMappedRange();
```

The reason the second method is slow is, the implementation may be able to map the buffers before all the submitted work is done.
 For example, if all the buffers are finished being used, but more work (unrelated to the buffers) is already submitted, then
 you'll end up waiting longer using the second method than the first.
2. Throttling work
 If you are doing heavy compute work and you submit too much work at once, the browser may kill your work.
 You can throttle the work by only submitting more work when the work you've already submitted is done.
Syntax
------


```js
device.queue.onSubmittedWorkDone()
```

### Parameters

None.

### Return value

A `Promise` that resolves with `Undefined`.

Examples
--------


```js
device.queue.submit([commandEncoder.finish()]);
device.queue.onSubmittedWorkDone().then(() => {
  console.log("All submitted commands processed.");
});
```

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

| Specification |
| --- |
| WebGPU # dom-gpuqueue-onsubmittedworkdone |

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

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

See also
--------

* The WebGPU API
GPUQueue: submit() method
=========================

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

 The **`submit()`** method of the
 `GPUQueue` interface schedules the execution of command buffers represented by one or more `GPUCommandBuffer` objects by the GPU.

Syntax
------


```js
submit(commandBuffers)
```

### Parameters

`commandBuffers`

An array of `GPUCommandBuffer` objects containing the commands to be enqueued for processing by the GPU.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`submit()`**, otherwise a `GPUValidationError` is generated and the `GPUQueue` becomes invalid:

* Any `GPUBuffer`, `GPUTexture`, and `GPUQuerySet` objects used in the encoded commands are available for use, i.e. not unavailable (`GPUBuffer`s are unavailable if they are currently mapped) or destroyed (with the `destroy()` method).
* Any `GPUExternalTexture` objects used in the encoded commands are not expired (they expire automatically shortly after being imported via `importExternalTexture()`).
* If a `GPUQuerySet` object used in an encoded command is of type `"occlusion"` query, it is not already used, except by `GPURenderPassEncoder.beginOcclusionQuery()`.
Examples
--------

In our basic render demo, a number of commands are recorded via a `GPUCommandEncoder`:


```js
// ...

// Create GPUCommandEncoder
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass

const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw a triangle

passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass

passEncoder.end();

// ...
```


The commands encoded by the `GPUCommandEncoder` are recoded into a `GPUCommandBuffer` using the `GPUCommandEncoder.finish()` method. The command buffer is then passed into the queue via a `submit()` call, ready to be processed by the GPU.


```js
device.queue.submit([commandEncoder.finish()]);
```


**Note:** Study the WebGPU samples to find more queue examples.

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

| Specification |
| --- |
| WebGPU # dom-gpuqueue-submit |

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

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

See also
--------

* The WebGPU API
GPUQueue: label property
========================

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

 The **`label`** read-only property of the
 `GPUQueue` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

You can get and set it directly on the `GPUQueue` object.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPUQueue.label`:


```js
device.queue.label = "myqueue";
console.log(device.queue.label); // "myqueue"
```


You can also set the queue's label at the time you request the device, like this:


```js
const device = adapter.requestDevice({
  defaultQueue: { label: "myqueue" },
});
```

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

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

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

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

See also
--------

* The WebGPU API
RTCRemoteOutboundRtpStreamStats: codecId property
=================================================

The **`codecId`** property of the `RTCRemoteOutboundRtpStreamStats` dictionary is a string that uniquely identifies the object that was inspected to produce the data in the `RTCCodecStats` for the RTP stream.

Value
-----

A string which uniquely identifies the object from which the contents of the stream's `RTCCodecStats` are derived.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcrtpstreamstats-codecid |

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

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

The **`transportId`** property of the `RTCRemoteOutboundRtpStreamStats` dictionary is a string that uniquely identifies the object from which the statistics contained in the `RTCTransportStats` properties in the `RTCStatsReport`.

Value
-----

A string uniquely identifying the source of the statistics contained the `RTCTransportStats` properties in the `RTCStatsReport`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcrtpstreamstats-transportid |

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

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

The **`timestamp`** property of the `RTCRemoteOutboundRtpStreamStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

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

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

The **`type`** property of the `RTCRemoteOutboundRtpStreamStats` dictionary is a string with the value `"remote-outbound-rtp"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"remote-outbound-rtp"` indicates that the statistics available in the current step are those defined in `RTCRemoteOutboundRtpStreamStats`.

Value
-----

A string with the value `"remote-outbound-rtp"`.

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

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

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

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