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