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-targetto an action button with the input element's idto get it working.

<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.

<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.

<div class="card card-bordered">
    <div class="card-body">
        <!--begin::Button-->
        <button 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>