Copy to Clipboard

Add copy-to-clipboard functionality to any element. Let users easily copy text or code snippets with a click.

CDN ScriptDocumentationExample

Copy the Copy to Clipboard <script> and paste into the <head> of your page

<!-- [WebTricks by CodeRaccoons] - Copy to Clipboard -->
<script async src="https://cdn.jsdelivr.net/gh/TheCodeRaccoons/WebTricks@1/Dist/Functional/CopyToClipboard.min.js" ></script>
Copy Script

Required attributes

I want the contents on of this element to be copied
Attribute to add
Name
wt-copycb-element
Value
target
Instructions

Add this to the element that has the text that you want to get copied, please note that this functionality will only copy the text that is within this element.

How does it look?
Optional
I want this element to show a message when triggering copy to clipboard
Attribute to add
Name
wt-copycb-element
Value
texttarget
Instructions

When using the Copy to Clipboard functionality you can select an element to show a message, add this attribute to the text that you want to display this text change

How does it look?
I want this element to trigger the copy to clipboard functionality.
Attribute to add
Name
wt-copycb-element
Value
trigger
Instructions

This does not have a default functionality, it should be set along with a target attribute to work.

How does it look?
Optional
I want this text to be shown when the trigger attribute is pressed.
Attribute to add
Name
wt-copycb-message
Value
Copied!
Instructions

Replaces the message to show the element got copied to clipboard,

How does it look?
Optional
I want this class to be toggled on and off when the trigger gets clicked.
Attribute to add
Name
wt-copycb-active
Value
classname
Instructions

Add a class to change the style of the trigger element when the content is copied.

‍

How does it look?

Optional Attributes

I want the contents on of this element to be copied
Attribute to add
Name
wt-copycb-element
Value
target
Instructions

Add this to the element that has the text that you want to get copied, please note that this functionality will only copy the text that is within this element.

Where?
This attribute should be added to the element that will hold the contents to copy.
How does it look?
Optional
I want this element to show a message when triggering copy to clipboard
Attribute to add
Name
wt-copycb-element
Value
texttarget
Instructions

When using the Copy to Clipboard functionality you can select an element to show a message, add this attribute to the text that you want to display this text change

Where?
This attribute should be added to the element that will show a copied message, note this attribute is not required
How does it look?
I want this element to trigger the copy to clipboard functionality.
Attribute to add
Name
wt-copycb-element
Value
trigger
Instructions

This does not have a default functionality, it should be set along with a target attribute to work.

Where?
This attribute should be added to the element that will trigger the copy-to-clipboard functionality
How does it look?
Optional
I want this text to be shown when the trigger attribute is pressed.
Attribute to add
Name
wt-copycb-message
Value
Copied!
Instructions

Replaces the message to show the element got copied to clipboard,

Where?
This attribute should be added to the same element that has the click trigger, wt-copycb-element="trigger"
How does it look?
Optional
I want this class to be toggled on and off when the trigger gets clicked.
Attribute to add
Name
wt-copycb-active
Value
classname
Instructions

Add a class to change the style of the trigger element when the content is copied.

‍

Where?
Add this attribute to the element with the wt-copycb-element="trigger" attribute.
How does it look?

Working examples

See the Pen WT - CopyToClipboard by Code Raccoons (@jorchie) on CodePen.

Information
ProjectsBlogCV
Contact me
Send me a Message
© 2023 The Code Raccoons. All rights reserved.
Privacy Policy