Clipboard

Clipboard.js allows you to copy or cut text to the clipboard with a single click, without using Flash.

Step 1: Install Clipboard.js

You can install Clipboard.js via yarn.

yarn add clipboard

Step 2: Include Clipboard Script

Include the Clipboard.js JavaScript file from your local libs folder.

<!-- Clipboard JS -->
<script src="../assets/libs/clipboard/clipboard.min.js"></script>

Step 3: Add Inputs and Buttons

Create input fields and buttons to copy or cut text using Clipboard.js.

<!-- Copy -->
<div class="input-group">
    <input type="text" class="form-control" id="clipboard-1" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <button type="button" class="btn btn-primary btn-icon" data-clipboard-action="copy" data-clipboard-target="#clipboard-1" aria-label="Copy"><i class="fa fa-copy"></i></button>
</div>

<!-- Cut -->
<div class="input-group">
    <input type="text" class="form-control" id="clipboard-2" value="Lorem ipsum dolor sit amet, consectetur adipisicing elit.">
    <button type="button" class="btn btn-primary btn-icon" data-clipboard-action="cut" data-clipboard-target="#clipboard-2" aria-label="Cut"><i class="fa fa-cut"></i></button>
</div>

Step 4: Initialize Clipboard

Use the following JavaScript code to enable copy and cut actions for the buttons.

"use strict";

$(function() {
    new ClipboardJS(".btn");
});

For more advanced usage, events, and examples, visit the Clipboard.js documentation.