Installation
Clipboard is installed via NPM as a third-party dependency by referring to
package.json
.
During the
Theme Installation
process,
it is compiled by the
Build Tools
into the
/dist/assets/vendors/clipboard
directory.
Require Assets
To use Clipboard in your pages, you need to include the following dependency assets in the order shown.
<!DOCTYPE html>
<html>
<head>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
<!--Vendor script -->
<script src="/dist/assets/vendors/clipboard/clipboard.min.js">
</script>
<!--Custom script -->
<script src="/dist/assets/pages/plugins/clipboard/default.js">
</script>
</body>
</html>
Copy Value
Click the copy button to copy the input value below.
class KTExampleClipboardCopyValue {
static init() {
// Select elements
const target = document.getElementById('clipboard_1_target');
const button = document.getElementById('clipboard_1_button');
const icon = button.querySelector('i');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
const clipboard = new ClipboardJS(button, {
target: target,
text: function() {
return target.value;
}
});
// Success action handler
clipboard.on('success', function(e) {
// Exit label update when already in progress
if(icon.classList.contains('ki-copy-success')){
return;
}
// Update button label
icon.classList.add('ki-copy-success');
icon.classList.add('!text-success');
icon.classList.remove('ki-copy');
// Revert button label after 3 seconds
setTimeout(function(){
icon.classList.remove('ki-copy-success');
icon.classList.remove('!text-success');
icon.classList.add('ki-copy');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCopyValue.init();
});
<div class="input">
<input id="clipboard_1_target" placeholder="Copy to clipboard" type="text" value="hwewe4654fdd5sdfh"/>
<button class="btn btn-icon" id="clipboard_1_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>
Cut Value
Apply
data-clipboard-action="cut"
attribute to cut the input value below.
class KTExampleClipboardCutValue {
static init() {
// Select elements
const target = document.getElementById('clipboard_2_target');
const button = document.getElementById('clipboard_2_button');
const icon = button.querySelector('i');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
const clipboard = new ClipboardJS(button, {
target: target,
text: function() {
const val = target.value;
target.value = '';
return val;
}
});
// Success action handler
clipboard.on('success', function(e) {
// Exit label update when already in progress
if(icon.classList.contains('ki-copy-success')){
return;
}
// Update button label
icon.classList.remove('ki-copy');
icon.classList.add('ki-copy-success');
icon.classList.add('text-success');
// Revert button label after 3 seconds
setTimeout(function(){
icon.classList.remove('ki-copy-success');
icon.classList.add('ki-copy');
icon.classList.remove('text-success');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCutValue.init();
});
<div class="input">
<input id="clipboard_2_target" placeholder="Copy to clipboard" type="text" value="hwewe4654fdd5sdfh"/>
<button class="btn btn-icon" id="clipboard_2_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>
Predefined Value
Add the
data-clipboard-text
attribute to the action button below and it will copy the value set on click.
class KTExampleClipboardPredefinedValue {
static init() {
// Select element
const target = document.getElementById('clipboard_3_target');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
const 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);
});
}
}
KTDom.ready(() => {
KTExampleClipboardPredefinedValue.init();
});
<button class="btn btn-primary" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js" id="clipboard_3_target">
Copy to clipboard
</button>
Copy Text
Add the attribute
data-clipboard-target
to an action button with the static element's id to get it working.
This is a sample static text string to copy!
class KTExampleClipboardCopyText {
static init() {
// Select elements
const target = document.getElementById('clipboard_4_target');
const button = document.getElementById('clipboard_4_button');
const icon = button.querySelector('i');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
const clipboard = new ClipboardJS(button, {
target: target,
text: function () {
return target.innerHTML;
}
});
// Success action handler
clipboard.on('success', function(e) {
// Exit label update when already in progress
if(icon.classList.contains('ki-copy-success')){
return;
}
// Update button label
icon.classList.remove('ki-copy');
icon.classList.add('ki-copy-success');
target.classList.add('text-success');
// Revert button label after 3 seconds
setTimeout(function(){
icon.classList.remove('ki-copy-success');
icon.classList.add('ki-copy');
target.classList.remove('text-success');
}, 3000);
});
}
}
KTDom.ready(() => {
KTExampleClipboardCopyText.init();
});
<div class="flex flex-col items-center justify-center gap-5">
<div class="font-semibold text-md rounded-lg border border-gray-300 border-dashed p-6" id="clipboard_4_target">
This is a sample static text string to copy!
</div>
<button class="btn btn-icon btn-sm btn-primary" data-clipboard-target="#clipboard_4_target" id="clipboard_4_button">
<i class="ki-outline ki-copy">
</i>
</button>
</div>