Clipboard
Overview Official Website
Choices.js is a lightweight and powerful datetime picker.
Usage
Choices.js's CSS and Javascript files
are bundled in the
vender.min.css and
vendor.js and globally
included in all pages.
Find the JS file for the following
chart at:
../src/assets/js/components/form-clipboard.js
Copy text from another element #
The value you include on this attribute needs to match another's element selector.
<div class="input-group">
<input id="clipboard_example" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
<button class="btn btn-primary btn-copy-clipboard" data-clipboard-target="#clipboard_example"> Copy </button>
</div>
// Select elements
const target = document.getElementById('clipboard_example');
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)
});
Cut text from another element #
Additionally, you can define a
data-clipboard-action
attribute to specify if you want to
either copy or
cut content.
<textarea id="clipboard_cut" class="form-control mb-3" cols="62" rows="6">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga.</textarea>
<button class="btn btn-primary" data-clipboard-action="cut" data-clipboard-target="#clipboard_cut"> Copy </button>
// Select elements
const target = document.getElementById('clipboard_cut');
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)
});
Copy text from attribute #
Truth is, you don't even need another
element to copy its content from. You
can just include a
data-clipboard-text
attribute in your trigger element.
<button id="clipboard_text" class="btn btn-primary" data-clipboard-text="Just because you can doesn't mean dfdyou should — clipboard.js">
Copy to clipboard
</button>
// Select element
const target = document.getElementById('clipboard_text');
// Init clipboard -- for more info, please read the offical documentation: https://clipboardjs.com/
var 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)
});