@saekitominaga/customelements-button-clipboard

Clipboard write text button

Clipboard write text button using Clipboard.writeText() by Custom Elements.

Demo

• Demo page

Examples

<button type="button" is="x-clipboard"
  data-text="Text"
>Copy</button>

<p id="clipboard-target">Text</p><!-- Target element: If the `data-target-for` attribute exists, write the contents of this element (Node.textContent or HTMLXXXElement.value or HTMLMetaElement.content) to the clipboard. -->
<button type="button" is="x-clipboard"
  data-target-for="clipboard-target"
  data-feedback-for="clipboard-feedback"
>Copy</button>
<p id="clipboard-feedback" hidden=""></p><!-- Feedback element: It will be displayed when writing to the clipboard is done. -->

Attributes

type [optional]

This function automatically sets type="button". However, it is recommended to manually add type="button" for JavaScript disabled environments and browsers that do not support Customized built-in elements (Safari 14, Edge Legacy, etc.). According to the description in the HTML specification, The missing value default and invalid value default are the Submit Button state.

data-text [conditionally required]

Text to write to clipboard. (Either the `data-target-for` attribute or this attribute is required)

data-target-for [conditionally required]

Target element's ID. (Either the `data-text` attribute or this attribute is required)

data-feedback-for [optional]

Feedback element's ID displayed when writing to the clipboard is done. (If omitted, feedback will be displayed in `console`)