Clipboard MDB Pro component

Clipboard - Bootstrap 5 & Material Design 2.0

Clipboard provides easy to use copy method from input fields or from any element you want.

Note: Read the API tab to find all available options and advanced customization


Basic example

By adding button with class name clipboard and data-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-clipboard-target="#copy-target">
          Copy
        </button>
      

Copy from element

There is no difference if element is an input or just div element.

Here is text to copy!

        <button class="btn btn-primary clipboard" data-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-clipboard-text you can set text to copy insted of text from text content.

Copy text from data-attr instead of text content.

        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target-3">
          Copy
        </button>
        <div id="copy-target-3" data-clipboard-text="This text is from data-attr!" class="mt-2">Copy text from data-attr despite of text content.</div>
      

Clipboard - API


Usage

Via data attributes


        <button class="btn btn-primary clipboard" data-clipboard-target="#copy-target">
          Copy
        </button>
      

Via JavaScript


        var 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()

        var myClipboardEl = document.getElementById('myClipboard') 
        var clipboard = new mdb.Modal(myClipboardEl)
        clipboard.dispose()
      

Events

Name Description
copy.mdb.clipboard This event fires immediately after copying text.

        var 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';