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

* Target element: If the data-target attribute exists, write the contents of this element to the clipboard. Content is retrieved with Node.textContent, but some elements retrieve attribute values (e.g. <img alt>, <input value>). See source code for details.

* Feedback element: It will be displayed when writing to the clipboard is done.

Attributes