Component – Copy To Clipboard

A Vanilla JavaScript plugin to copy content to the clipboard.Download + DemoView DemoDownload ComponentHow To
Use this plugin to copy content to the clipboard. Add the .js-copy-to-clip class to the button you want to use as trigger.
<button class=”j…


This content originally appeared on CodyHouse and was authored by CodyHouse

A Vanilla JavaScript plugin to copy content to the clipboard.Copy To Clipboard

Download + Demo

How To

Use this plugin to copy content to the clipboard. Add the .js-copy-to-clip class to the button you want to use as trigger.

<button class="js-copy-to-clip">
  Click to copy content to the clipboard!
</button>

Content to copy #

To connect the copy button with the element whose content you want to copy, make sure the aria-controls value of first one is equal to the ID value of the second one.

<p id="content-to-copy">Content to copy</p>

<button class="js-copy-to-clip" aria-controls="content-to-copy">
  Click to copy
</button>

If no aria-controls attribute is set, the content of the .js-copy-to-clip element is copied to the clipboard.

Alternatively, you can use the data-clipboard-content attribute to pass the content you want to copy:

<button class="js-copy-to-clip" data-clipboard-content="This is the content to copy.">
  Click to copy
</button>

Tooltip #

We use the Tooltip component to show a tooltip element on hover and to display a success message once the content has been copied to the clipboard. For this to work properly, make sure to modify the .js-copy-to-clip element as follows:

  • add the js-tooltip-trigger class;
  • add a title: this is the content of the tooltip on hover (e.g., 'Click to copy');
  • add a data-success-title attribute: this is the success message (e.g., 'Copied!').
<button class="js-copy-to-clip js-tooltip-trigger" title="Click to copy" data-success-title="Copied!">
  <!-- ... -->
</button>

Make sure to check the Tooltip info page for additional options.

Custom Events #

Use the following events to detect when content is copied to the clipboard:

  • contentCopied: content has been successfully copied;
  • contentNotCopied: there was an issue while copying the content.
var copyTarget = document.getElementsByClassName('js-copy-to-clip');
if(copyTarget.length > 0) {
  copyTarget[0].addEventListener('contentCopied', function(event) {
    // success
  });

  copyTarget[0].addEventListener('contentNotCopied', function(event) {
    // error
  });
}

Additionally, when content is successfully copied to the clipboard, the .copy-to-clip--copied class is added to the .js-copy-to-clip element. 


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-11-30T16:18:29+00:00) Component – Copy To Clipboard. Retrieved from https://www.scien.cx/2021/11/30/component-copy-to-clipboard/

MLA
" » Component – Copy To Clipboard." CodyHouse | Sciencx - Tuesday November 30, 2021, https://www.scien.cx/2021/11/30/component-copy-to-clipboard/
HARVARD
CodyHouse | Sciencx Tuesday November 30, 2021 » Component – Copy To Clipboard., viewed ,<https://www.scien.cx/2021/11/30/component-copy-to-clipboard/>
VANCOUVER
CodyHouse | Sciencx - » Component – Copy To Clipboard. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/30/component-copy-to-clipboard/
CHICAGO
" » Component – Copy To Clipboard." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/11/30/component-copy-to-clipboard/
IEEE
" » Component – Copy To Clipboard." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/11/30/component-copy-to-clipboard/. [Accessed: ]
rf:citation
» Component – Copy To Clipboard | CodyHouse | Sciencx | https://www.scien.cx/2021/11/30/component-copy-to-clipboard/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts