Clipboard

A modern approach to copy text to clipboard

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>

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