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

  buttonClipboard(document.querySelectorAll('.js-button-clipboard')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
</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.

HTML attributes