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
Basic example
By adding button with class name clipboard
and
data-mdb-target
attribute you can easily make your text copyable.
<div class="form-outline">
<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 clipboard" data-mdb-clipboard-target="#copy-target">
Copy
</button>
Copy from element
There is no difference if element is an input
or just div
element.
<button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target-2">
Copy
</button>
<div id="copy-target-2" class="mt-2">Here is text to copy!</div>
Copy from data attribute
By adding to target of copying data-mdb-clipboard-text
you can set text to copy
instead of text from text content.
<button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target-3">
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>
Clipboard - API
Usage
Via data attributes
<button class="btn btn-primary clipboard" data-mdb-clipboard-target="#copy-target">
Copy
</button>
Via JavaScript
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.
$('.example-class').clipboard(options);
Options
Name | Type | Default | Description |
---|---|---|---|
clipboardTarget
|
Null / String | '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 mdb.Clipboard(myClipboardEl)
clipboard.dispose()
Events
Name | Description |
---|---|
copy.mdb.clipboard
|
This event fires immediately after copying text. |
const myClipboardEl = document.getElementById('myClipboard')
myClipboardEl.addEventListener('copy.mdb.clipboard', function (e) {
// do something...
})
Import
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Clipboard } from 'mdb-ui-kit';