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/components/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
$.HSCore.components.HSClipboard.init('.js-clipboard');
});
</script>
Basic examples
<!-- Clipboard -->
<div class="js-focus-state input-group mb-4">
<input id="tooltipExample" type="text" class="form-control" value="I am a tooltip example">
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;"
data-toggle="tooltip"
title="Copy to clipboard!"
data-type="tooltip"
data-success-text="Copied!"
data-content-target="#tooltipExample">
<span class="fas fa-clone"></span>
</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="js-focus-state input-group mb-4">
<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" href="javascript:;"
data-content-target="#iconExample"
data-class-change-target="#linkIcon"
data-default-class="fas fa-clone"
data-success-class="fas fa-check">
<span id="linkIcon" class="fas fa-clone"></span>
</a>
</div>
</div>
<!-- End Clipboard -->
<!-- Clipboard -->
<div class="js-focus-state input-group mb-4">
<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" href="javascript:;"
data-content-target="#textExample"
data-success-text="Copied!">Copy 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">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Clipboard -->
<div class="js-focus-state 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-type="tooltip" data-success-text="Copied!"
data-content-target="#modalExample"
data-container="#exampleModal">
<span class="fas fa-clone"></span>
</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 -->
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-controls="".
| Attribute | Description |
|---|---|
|
|
ID of the element from which the contents will be copied to the memory buffer. |
|
|
ID element whose classes will be changed, specified in the data-success-class, after successfully copying to the memory buffer. |
|
|
Classes that must be passed to the element specified in the data-class-change-target, after some delay (800ms). |
|
|
The classes to be transferred to the element specified in the data-class-change-target, immediately after successfully copying to the memory buffer. |
|
|
The text with which the default will be replaced by the element specified in data-class-change-target, immediately after successful copying to the memory buffer. And it will also be changed to default after some delay (800ms). |