Clipboard
A modern approach to copy text to clipboard
Official documentation
For more detailed information and examples, see the official documentation: Clipboard.js .
How to use?
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Front to enable it.
<script src="../../assets/js/hs.clipboard.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of clipboard
$('.js-clipboard').each(function() {
var clipboard = $.HSCore.components.HSClipboard.init(this);
});
});
</script>
Basic examples
<!-- Clipboard -->
<div class="input-group mb-3">
<input id="popoverExample1" type="text" class="form-control" value="I am a popover example">
<div class="input-group-append">
<a class="js-clipboard input-group-text bg-white" href="javascript:;" title="Copy to clipboard!" data-toggle="popover" data-placement="top" data-trigger="hover" data-content="And here's some amazing content. It's very engaging. Right?"
data-hs-clipboard-options='{
"type": "popover",
"successText": "Copied!",
"contentTarget": "#popoverExample1"
}'>
<i class="fas fa-copy"></i>
</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="input-group mb-3">
<input id="tooltipExample1" type="text" class="form-control" value="I am a tooltip example">
<div class="input-group-append">
<a class="js-clipboard input-group-text bg-white" href="javascript:;" data-toggle="tooltip" title="Copy to clipboard!"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#tooltipExample1"
}'>
<i class="fas fa-copy"></i>
</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="input-group mb-3">
<input id="iconExample" type="text" class="form-control" value="I am an icon example">
<div class="input-group-append">
<a class="js-clipboard input-group-text bg-white" href="javascript:;"
data-hs-clipboard-options='{
"contentTarget": "#iconExample",
"classChangeTarget": "#iconExampleLinkIcon",
"defaultClass": "fas fa-copy",
"successClass": "fas fa-check"
}'>
<span id="iconExampleLinkIcon" class="fas fa-copy"></span>
</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="input-group mb-3">
<input id="textExample" type="text" class="form-control" value="I am a text example">
<div class="input-group-append">
<a class="js-clipboard input-group-text bg-white" href="javascript:;"
data-hs-clipboard-options='{
"contentTarget": "#textExample",
"successText": "Copied!"
}'>Copy to Clipboard!</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="input-group mb-4">
<input id="cutExample" type="text" class="form-control" value="I am a text cut example">
<div class="input-group-append">
<a class="js-clipboard input-group-text bg-white" href="javascript:;"
data-hs-clipboard-options='{
"action": "cut",
"contentTarget": "#cutExample",
"successText": "Cut!"
}'>Cut to Clipboard!</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Clipboard in modal
</button>
<!-- End Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
</div>
<div class="modal-body">
<!-- Clipboard -->
<div class="input-group mb-4">
<input id="modalExample" type="text" class="form-control" value="I am a modal example" readonly>
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;" data-toggle="tooltip" title="Copy to clipboard!"
data-hs-clipboard-options='{
"type": "tooltip",
"successText": "Copied!",
"contentTarget": "#modalExample",
"container": "#exampleModal"
}'>
<i class="fas fa-copy"></i>
</a>
</div>
</div>
<!-- End Clipboard -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->
Extend
By assigning a variable, you can call the standard methods of the plugin:
<script>
$(document).on('ready', function () {
// initialization of clipboard
$('.js-clipboard').each(function() {
var clipboard = $.HSCore.components.HSClipboard.init(this);
clipboard.on('success', function() {
console.log('Copied!!!');
});
});
});
</script>
Attributes
By assigning a variable, you can call the standard methods of the plugin:
data-hs-clipboard-options='{
...
// Custom
"type": null,
"contentTarget": "tooltip",
"classChangeTarget": "#ID",
"defaultClass": "test1 test2",
"successText": "Copied!",
"successClass": "test1 test2"
}' - array
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-clipboard-options='{}'. For more detailed or missing attributes/functions, see the official Clipboard.js documentation page.
| Parameters | Description | Default value |
|---|---|---|
|
|
One of three types: tooltip, popover, default |
null |
|
|
Selector whose value/markup will be copied to the buffer | null |
|
|
Selector whose class will change after successful copy to buffer | null |
|
|
Classes that should be passed to the element specified in classChangeTarget, after some delay (800ms) |
null |
|
|
Classes that should be passed to the element specified in classChangeTarget, immediately after successful copying to the memory buffer |
null |
|
|
The text with which the default will be replaced for the element specified in classChangeTarget, immediately after successful copying to the memory buffer. It will also be changed to default after some delay (800ms) |
null |