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('.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>
2022©
Keenthemes
