Copy text from another element

A pretty common use case is to copy content from another element. You can do that by adding a data-clipboard-target attribute in your trigger element.

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

Please press the button and copy me!

Copy

<p id="copytext">Please press the button and copy me!</p>

<button class="btn btn-white" data-clipboard-target="#copytext"><i class="fa fa-copy"></i> Copy</button>
                                    

Cut text from another element

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

This is example text that will be cuted fromt this textarea control. Cut to clipboard

<textarea id="cuttext">This is example text that will be cuted fromt this textarea control.</textarea>

<button class="btn btn-white" data-clipboard-action="cut" data-clipboard-target="#cuttext"><i class="fa fa-cut"></i> Cut to clipboard</button>