Clipboard
Bootstrap 5 Clipboard
Copy to clipboard feature for the latest Bootstrap 5. Let your users easily copy text or links with one click.
Note: Read the API tab to find all available options and advanced customization
*
* UMD autoinits are enabled
by default. This means that you don't need to initialize
the component manually. However if you are using MDBootstrap ES format then you should pass
the required components to the initMDB method.
Basic example
By adding button with data-mdb-clipboard-init and
data-mdb-target attributes you can easily make your text copyable.
<div class="form-outline" data-mdb-input-init>
<input type="text" id="copy-target" class="form-control" />
<label class="form-label" for="copy-target">Type here text to copy</label>
</div>
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target" data-mdb-ripple-init>
Copy
</button>
// Initialization for ES Users
import { Clipboard, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard, Input, Ripple });
Copy from element
There is no distinction, whether the element is an input or simply a div element.
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-2" data-mdb-ripple-init>
Copy
</button>
<div id="copy-target-2" class="mt-2">Here is text to copy!</div>
// Initialization for ES Users
import { Clipboard, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard, Ripple });
Copy from data attribute
By adding data-mdb-clipboard-text to the copying target, you can specify the text to be copied,
overriding the text from the targeted element.
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-3" data-mdb-ripple-init>
Copy
</button>
<div id="copy-target-3" data-mdb-clipboard-text="This text is from data-mdb-attr!" class="mt-2">
Copy text from data-mdb-attr despite of text content.
</div>
// Initialization for ES Users
import { Clipboard, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard, Ripple });
Feedback example
Listen for copied.mdb.clipboard event to perform actions, such as displaying feedback message to users.
<div
class="alert fade mt-5"
id="container-example"
role="alert"
data-mdb-alert-init
data-mdb-color="primary"
data-mdb-hidden="true"
data-mdb-autohide="true"
data-mdb-delay="4000"
data-mdb-position="top-right"
data-mdb-width="25%"
>
Text copied!
</div>
<div class="form-outline" data-mdb-input-init>
<input type="text" id="copy-target-4" class="form-control" />
<label class="form-label" for="copy-target-4">Type here text to copy</label>
</div>
<button id="myExample" class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target-4" data-mdb-ripple-init>
Copy
</button>
import { Alert, Clipboard, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard, Input, Ripple });
const myExample = document.querySelector('#myExample');
const alertInstance = Alert.getInstance(document.querySelector('#container-example'));
myExample.addEventListener('copied.mdb.clipboard', ()=> {
myExample.innerText = 'COPIED!'
alertInstance.show()
setTimeout(() => {
myExample.innerText = 'COPY'
}, 4000);
})
const myExample = document.querySelector('#myExample');
const alertInstance = mdb.Alert.getInstance(document.querySelector('#container-example'));
myExample.addEventListener('copied.mdb.clipboard', ()=> {
myExample.innerText = 'COPIED!'
alertInstance.show()
setTimeout(() => {
myExample.innerText = 'COPY'
}, 4000);
})
Clipboard - API
Import
Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must
first import the component and then initialize it with the initMDB method. If you are going to use the UMD format,
just import the mdb-ui-kit package.
import { Clipboard, initMDB } from "mdb-ui-kit";
initMDB({ Clipboard });
import 'mdb-ui-kit';
Usage
Via data attributes
Using the Clipboard method doesn't require any additional JavaScript code - simply add
data-mdb-clipboard-init attribute to
element you want to copy
and use other data attributes to set all options.
For ES format, you must first import and call the initMDB method.
<button class="btn btn-primary" data-mdb-clipboard-init data-mdb-clipboard-target="#copy-target">
Copy
</button>
Via JavaScript
const myClipboard = new Clipboard(document.getElementById('clipboard'), options);
const myClipboard = new mdb.Clipboard(document.getElementById('clipboard'), options);
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.example-class').clipboard(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-, as in data-mdb-clipboard-target="".
| Name | Type | Default | Description |
|---|---|---|---|
clipboardTarget
|
String | null | 'null' |
Points an element from which you will copy text. |
Methods
| Name | Description | Example |
|---|---|---|
dispose
|
Manually deletes an instance of clipboard |
myClipboard.dispose()
|
getInstance
|
Static method which allows you to get the clipboard instance associated to a DOM element. |
Clipboard.getInstance(myClipboardEl)
|
getOrCreateInstance
|
Static method which returns the clipboard instance associated to a DOM element or create a new one in case it wasn't initialized. |
Clipboard.getOrCreateInstance(myClipboardEl)
|
const myClipboardEl = document.getElementById('myClipboard');
const clipboard = new Clipboard(myClipboardEl);
clipboard.dispose();
const myClipboardEl = document.getElementById('myClipboard');
const clipboard = new mdb.Clipboard(myClipboardEl);
clipboard.dispose();
Events
| Name | Description |
|---|---|
copied.mdb.clipboard
|
This event fires immediately after copying text. |
const myClipboardEl = document.getElementById('myClipboard')
myClipboardEl.addEventListener('copied.mdb.clipboard', function (e) {
// do something...
})