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

Copy-paste the following <script> near the end of your pages under JS MyTravel to enable it.

<script src="../../assets/js/components/hs.clipboard.js"></script>
Copy

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>
Copy

Basic examples

Copy to Clipboard! 
<!-- 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 -->
Copy

JavaScript behavior

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

data-content-target

 ID of the element from which the contents will be copied to the memory buffer.

data-class-change-target

 ID element whose classes will be changed, specified in the data-success-class, after successfully copying to the memory buffer.

data-default-class

 Classes that must be passed to the element specified in the data-class-change-target, after some delay (800ms).

data-success-class

 The classes to be transferred to the element specified in the data-class-change-target, immediately after successfully copying to the memory buffer.

data-success-text

 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).
Contact Us