@w0s/button-clipboard

Clipboard write text button

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/button-clipboard": "..."
    }
  }
</script>
<script type="module">
  import ButtonClipboard from '@w0s/button-clipboard';

  for (const targetElement of document.querySelectorAll('.js-button-clipboard')) {
    new ButtonClipboard(targetElement);
  }
</script>

<button type="button" class="js-button-clipboard"
  data-text="Text"
>Copy</button>

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

Attributes

type [optional]

This attribute is not required, but it is recommended to include type="button". 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 attribute or this attribute is required)

data-target [conditionally required]

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

data-feedback [optional]

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