Overview

Initializes a component that copies the text of the element corresponding to the selector specified in the data-clipboard-target attribute to the clipboard.
The actual process for copying text to the clipboard is handled by clipboard.js.

Reference

Parameters:
  • context: string|HTMLElement|JQuery
    A button element with a "data-clipboard-target" attribute that initiates a clipboard copy, or a context element or selector with such an element.
  • delay: number
    Time (in milliseconds) to switch from the copy complete icon to the pre-copy icon. Default is 3000.

Basic

Set the data-clipboard-target attribute of the action button to the element ID you wish to copy and initialize it with the clipboard function.
              <!--begin::Input group-->
<div class="input-group">
  <!--begin::Input-->
  <input id="target" type="text" class="form-control" placeholder="name@example.com" value="name@example.com" />
  <!--end::Input-->
  <!--begin::Button-->
  <button id="button" class="btn btn-icon btn-light" data-clipboard-target="#target">
    <i class="ki-duotone ki-copy fs-2"></i>
  </button>
  <!--end::Button-->
</div>
<!--end::Input group-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
components.initClipboard(document.getElementById('button'));

Batch initialization

The clipboards of multiple action buttons can be initialized at once.
In that case, initialize the parent element of the action button that has the data-clipboard-target attribute with the clipboard function. 
              <!--begin::Wrapper-->
<div id="wrapper">
  <!--begin:: Input group-->
  <div class="input-group mb-10">
    <!--begin::Input-->
    <input id="name" type="text" class="form-control" placeholder="Full name" value="Tiger Nixon" />
    <!--end::Input-->
    <!--begin::Button-->
    <button id="button" class="btn btn-icon btn-light" data-clipboard-target="#name">
      <i class="ki-duotone ki-copy fs-2"></i>
    </button>
    <!--end::Button-->
  </div>
  <!--end::Input group-->
  <!--begin::Input group-->
  <div class="input-group">
    <!--begin::Input-->
    <input id="address" type="text" class="form-control" placeholder="Address" value="169 Pinnick Street, Waye, New Jersey, 07477" />
    <!--end::Input-->
    <!--begin::Button-->
    <button id="button" class="btn btn-icon btn-light" data-clipboard-target="#address">
      <i class="ki-duotone ki-copy fs-2"></i>
    </button>
    <!--end::Button-->
  </div>
  <!--end::Input group-->
</div>
<!--end::Wrapper-->
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
components.initClipboard(document.getElementById('wrapper'));