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

  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

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)