Usage

First, you need to instantiate it using a DOM selector. This selector corresponds to the trigger element, i.e. <button>.

new Clipboard('.btn');

Copy text from attribute

The easiest way to copy some content to the clipboard, is to include a data-value attribute in your trigger element.

<!-- Trigger -->
<button class="btn" data-value="Heya!">Copy</button>

Copy text from another element

Alternatively, you can copy content from another element by adding a data-target attribute in your trigger element.

The value you include on this attribute needs to match another's element id attribute.

<!-- Target -->
<input id="foo" value="https://git.io/vn3cM">

<!-- Trigger -->
<button class="btn" data-target="foo">Copy</button>

Cut text from another element

Additionally, you can define a data-action attribute to specify if you want to either copy or cut content.

If you omit this attribute, copy will be used by default.

<!-- Target -->
<textarea id="bar">clipboard.js rocks!</textarea>

<!-- Trigger -->
<button class="btn" data-action="cut" data-target="bar">
    Copy
</button>

As you may expect, the cut action only works on <input> or <textarea> elements.