Clipboard.js

A modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzipped.

How To

Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Step 2: Click here to download Clipboard JS Source Click here to download Clipboard JS Source

Features

No flash file or framework
Customazible & extendable
Integration with Bootstrap Tooltips

Example

Copy text from input

Cut text from input

<Division Class="input-group" HtmlDiv="True" ID="input-group" IdeDisplayStatus="Collapsed">
  <InputText Class="form-control" DefaultValue="Copy me" ID="inpCopyMe" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="btn btn-outline-secondary" HtmlDiv="True" ID="btnCopyMe">
      <Label Class="fa fa-copy" HtmlTag="I" />
    </Division>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
new Clipboard(document.getElementById('btnCopyMe'), {
   text: function(trigger) {
      return $('#inpCopyMe').val();
   }
});
/*...END INCLUDE SCRIPT*/

<Division Class="input-group" HtmlDiv="True" ID="input-group">
  <InputText Class="form-control" DefaultValue="Cut me" ID="inpCutMe" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="btn btn-outline-secondary" HtmlDiv="True" ID="btnCutMe">
      <Label Class="fa fa-cut" HtmlTag="I" />
    </Division>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
new Clipboard(document.getElementById('btnCutMe'), {
   text: function(trigger) {
      var returnText = $('#inpCutMe').val();
      $('#inpCutMe').val('');
      return returnText;
   }
});
/*...END INCLUDE SCRIPT*/

Copy with bootstrap tooltip

<Division Class="input-group" HtmlDiv="True" ID="input-group">
  <InputText Class="form-control" DefaultValue="copy text..." ID="inpCopyWithTooltip" />
  <Division Class="input-group-append" HtmlDiv="True">
    <Division Class="btn btn-outline-secondary" HtmlDiv="True" ID="btnCopyWithTooltip" Tooltip="Copied!">
      <Label Class="fa fa-copy" HtmlTag="I" />
    </Division>
  </Division>
</Division>

/*START INCLUDE SCRIPT ELEMENT...*/
var btnCopyWithTooltip = document.getElementById('btnCopyWithTooltip');
$(btnCopyWithTooltip).tooltip({trigger: 'manual'});

new Clipboard(btnCopyWithTooltip, {
   text: function(trigger) {
      return $('#inpCopyWithTooltip').val();
   }
}).on('success', function(e) {
   $(btnCopyWithTooltip).tooltip('show');
   setTimeout(function() {
      $(btnCopyWithTooltip).tooltip('hide');
   }, 1000);
});
/*...END INCLUDE SCRIPT*/

Options

If you don't want to modify your HTML, there's a pretty handy imperative API for you to use. All you need to do is declare a function, do your thing, and return a value.

Param	Description
`target`:	For instance, if you want to dynamically set a `target`, you'll need to return a Node.
`text`:	If you want to dynamically set a `text`, you'll return a String.
`container`:	For use in Bootstrap Modals or with any other library that changes the focus you'll want to set the focused element as the `container` value.

Methods

Param	Description
`destroy`	Also, if you are working with single page apps, you may want to manage the lifecycle of the DOM more precisely. Here's how you clean up the events and objects that we create.

var clipboard = new Clipboard('.btn');
clipboard.destroy();

Events

Show user feedback or capture what has been selected after a copy/cut operation.

Event	Description
`success`	Triggered when the target is successfully copied.
`error`	Triggered when target cannot be found.

var clipboard = new Clipboard('.btn');
clipboard.on('success', function(e) {
   console.info('Action:', e.action);
   console.info('Text:', e.text);
   console.info('Trigger:', e.trigger);

   e.clearSelection();
});

clipboard.on('error', function(e) {
   console.error('Action:', e.action);
   console.error('Trigger:', e.trigger);
});