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)
});