Clippy Copy Element

A clipboard element to copy text content, input values, and more.

Installation

npm install @ambiki/clippy-copy-element

Usage

import '@ambiki/clippy-copy-element'

Copying an input's value

<input id="input" type="text" value="Some value">
<clippy-copy for="input">Copy</clippy-copy>

Similarly, we also support textarea and select tags.

Copying an element's textContent

<div id="element">
  Copy me!
</div>
<clippy-copy for="element">Copy</clippy-copy>

Copying from an attribute

<clippy-copy value="Copy this text!">Copy</clippy-copy>

Listening for events

clippy-copy:copied event will be dispatched from the <clippy-copy> element after copying to the clipboard.

document.addEventListener('clippy-copy:copied', (event) => {
  const button = event.target;
  button.setAttribute('aria-label', 'Copied!');
})

License

Distributed under the MIT license.