W3CoreUI

Clipboard JS

Clipboard.js is a lightweight, modern JavaScript library for copying text to the clipboard. It simplifies text copying with minimal setup and no dependencies. Click here

Copy Text

The value you include on this attribute needs to match another's element selector.


<div class="input-group">
  <!-- Target -->
  <input id="foo" type="text" class="form-control" value="https://coreui.w3itexperts.com" >
  
  <!-- Trigger -->
  <button class="btn btn-primary clipboard-target" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
</div>

Cut Text

Additionally, you can define a data-clipboard-action attribute to specify if you want to either copy or cut content.
If you omit this attribute, copy will be used by default.


<!-- Target -->
<textarea id="bar" class="form-control mb-3" rows="4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</textarea>

<!-- Trigger -->
<button class="btn btn-primary clipboard-target" data-clipboard-action="cut" data-clipboard-target="#bar">
	Cut to clipboard
</button>

Copy text from attribute

Truth is, you don't even need another element to copy its content from. You can just include a data-clipboard-text attribute in your trigger element.


<!-- Trigger -->
<button class="btn btn-success light clipboard-text" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
  Copy to clipboard
</button>

Static Element

This static copy feature highlights the target and switches icons on successful copy.

Grab this snappy snippet of static text!


<div class="d-flex gap-3 flex-wrap align-items-center fs-5">
  <div id="staticText">Grab this snappy snippet of static text!</div>

  <button type="button" class="btn btn-square btn-sm btn-light clipboard-static" data-clipboard-target="#staticText">
    <i class="fa-solid fa-clone"></i>
  </button>
</div>