Documentation v1.0.6

Preview Upgrade to Pro

Overview

Clipboard is a modern approach to copy text to clipboard. No Flash. No frameworks. For full documentation please check the plugin's site.

Usage

Clipboard's CSS and Javascript files are bundled in the global plugin bundles and globally included in all pages:
<link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
<script src="assets/plugins/global/plugins.bundle.js"></script>

Basic Usage

Simply add the attribute data-clipboard-target to an action button with the input element's id to get it working. Then add the clipboard JS to initialize it.
// Select elements
const target = document.getElementById('kt_clipboard_1');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.value;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});
<div class="card card-bordered">
    <div class="card-body">
        <!--begin::Input group-->
        <div class="input-group">
            <!--begin::Input-->
            <input id="kt_clipboard_1" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
            <!--end::Input-->

            <!--begin::Button-->
            <button class="btn btn-light-primary" data-clipboard-target="#kt_clipboard_1">
                Copy
            </button>
            <!--end::Button-->
        </div>
        <!--begin::Input group-->
    </div>
</div>

Cut Example

Add data-clipboard-action="cut" to the action button element to define a cut action. Then add the clipboard JS to initialize it.
// Select elements
const target = document.getElementById('kt_clipboard_2');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var clipboard = new ClipboardJS(button, {
    target: target,
    text: function() {
        return target.innerText;
    }                 
});

// Success action handler
clipboard.on('success', function(e) {
    const currentLabel = button.innerHTML;

    // Exit label update when already in progress
    if(button.innerHTML === 'Copied!'){
        return;
    }

    // Update button label
    button.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function(){
        button.innerHTML = currentLabel;
    }, 3000)
});
<div class="card card-bordered">
    <div class="card-body">
        <!--begin::Input-->
        <textarea id="kt_clipboard_2" class="form-control mb-3">This is an example to cut with Clipboard</textarea>
        <!--end::Input-->

        <!--begin::Button-->
        <button class="btn btn-light-primary" data-clipboard-action="cut" data-clipboard-target="#kt_clipboard_2">
            Cut
        </button>
        <!--end::Button-->
    </div>
</div>

Predefined Value

Add the data-clipboard-text to an action button and it will copy the value set on click. Then add the clipboard JS to initialize it.
// Select element
const target = document.getElementById('kt_clipboard_3');

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(target);

// Success action handler
clipboard.on('success', function (e) {
    const currentLabel = target.innerHTML;

    // Exit label update when already in progress
    if (target.innerHTML === 'Copied!') {
        return;
    }

    // Update button label
    target.innerHTML = 'Copied!';

    // Revert button label after 3 seconds
    setTimeout(function () {
        target.innerHTML = currentLabel;
    }, 3000)
});
<div class="card card-bordered">
    <div class="card-body">
        <!--begin::Button-->
        <button id="kt_clipboard_3" class="btn btn-light-primary" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
            Copy to clipboard
        </button>
        <!--end::Button-->
    </div>
</div>

Static Element

Add the attribute data-clipboard-target to an action button with the static element's id to get it working. Then add the clipboard JS to initialize it.
This is a sample static text string to copy!
// Select elements
const target = document.getElementById('kt_clipboard_4');
const button = target.nextElementSibling;

// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
clipboard = new ClipboardJS(button, {
    target: target,
    text: function () {
        return target.innerHTML;
    }
});

// Success action handler
clipboard.on('success', function (e) {
    var checkIcon = button.querySelector('.bi.bi-check');
    var svgIcon = button.querySelector('.svg-icon');

    // Exit check icon when already showing
    if (checkIcon) {
        return;
    }

    // Create check icon
    checkIcon = document.createElement('i');
    checkIcon.classList.add('bi');
    checkIcon.classList.add('bi-check');
    checkIcon.classList.add('fs-2x');

    // Append check icon
    button.appendChild(checkIcon);

    // Highlight target
    const classes = ['text-success', 'fw-boldest'];
    target.classList.add(...classes);

    // Highlight button
    button.classList.add('btn-success');

    // Hide copy icon
    svgIcon.classList.add('d-none');

    // Revert button label after 3 seconds
    setTimeout(function () {
        // Remove check icon
        svgIcon.classList.remove('d-none');

        // Revert icon
        button.removeChild(checkIcon);

        // Remove target highlight
        target.classList.remove(...classes);

        // Remove button highlight
        button.classList.remove('btn-success');
    }, 3000)
});
<div class="card card-bordered">
    <div class="card-body">
        <!--begin::Row-->
        <div class="d-flex align-items-center flex-wrap">
            <!--begin::Input-->
            <div id="kt_clipboard_4" class="me-5">This is a sample static text string to copy!</div>
            <!--end::Input-->

            <!--begin::Button-->
            <button class="btn btn-icon btn-sm btn-light" data-clipboard-target="#kt_clipboard_4">
                <!--begin::Svg Icon | path: icons/duotune/general/gen054.svg-->
            </button>
            <!--end::Button-->
        </div>
        <!--end::Row-->
    </div>
</div>
Upgrade To Pro
Pro Version Benefits Free Pro
UI Elements 20 100
In-house Components 20 40
Crafted Pages 5 20
Complete Documentation
Product Support
Layout Builder
Source Vectors
Email Templates
Calendar App
User Management App
Chat App
Customers App
Upgrade to Jet HTML Free
Learn & Get Inspired

Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation
From guides and how-tos, to live demos and code examples to get started right away.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now