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

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