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
Nova 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 example
<div class="input-group">
<input type="text" id="basic-example-field" class="form-control" value="https://htmlstream.com">
<div class="input-group-append">
<a class="js-clipboard input-group-text" href="javascript:;"
data-clipboard-target="#basic-example-field">
<span class="nova-layers"></span>
</a>
</div>
</div>
With tooltip
<div class="input-group">
<input type="text" id="tooltipExample" class="form-control" value="I am a tooltip 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="#tooltipExample">
<span class="nova-layers"></span>
</a>
</div>
</div>
With change icons
<div class="input-group">
<input type="text" id="iconExample" class="form-control" value="I am an icon example" readonly>
<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="nova-layers"
data-success-class="nova-check">
<span id="linkIcon" class="nova-layers"></span>
</a>
</div>
</div>
Cahnge text
<div class="input-group">
<input type="text" id="textExample" class="form-control" value="I am a text example" readonly>
<div class="input-group-append">
<a class="js-clipboard btn btn-outline-primary" href="javascript:;"
data-content-target="#textExample"
data-success-text="Copied!">Copy to Clipboard!</a>
</div>
</div>
Cut to clipboard
<div class="form-group">
<textarea id="cut-to-clipboard-field" class="form-control">Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis.</textarea>
</div>
<button class="btn btn-primary js-clipboard"
data-clipboard-action="cut"
data-clipboard-target="#cut-to-clipboard-field">
Cut to clipboard
</button>
Modal
<!-- Modal Toggle -->
<button type="button" class="btn btn-primary btn-block" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Modal Toggle -->
<!-- Clipboard 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">
<label>Copy text</label>
<div class="input-group">
<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="nova-layers"></span>
</a>
</div>
</div>
</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 Clipboard 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).
|