Logo

Documentation v8.2.5

Downloads Preview
Light
Dark
System

Overview

Clipboardis 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-targetto an action button with the input element's idto 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-textto 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-targetto an action button with the static element's idto 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('.ki-check');
    var copyIcon = button.querySelector('.ki-copy');

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

    // Create check icon
    checkIcon = document.createElement('i');
    checkIcon.classList.add('ki-duotone');
    checkIcon.classList.add('ki-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
    copyIcon.classList.add('d-none');

    // Revert button label after 3 seconds
    setTimeout(function () {
        // Remove check icon
        copyIcon.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">
                <i class="ki-duotone ki-copy fs-2 text-muted"></i>
            </button>
            <!--end::Button-->
        </div>
        <!--end::Row-->
    </div>
</div>