https://github.com/component/clipboard-dom

Makes a DOM element (i.e. <button>) write to the system clipboard
https://github.com/component/clipboard-dom

Last synced: 12 days ago
JSON representation

Makes a DOM element (i.e. <button>) write to the system clipboard

• Host: GitHub
• URL: https://github.com/component/clipboard-dom
• Owner: component
• Created: 2012-09-01T00:35:34.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2015-03-12T01:42:24.000Z (almost 10 years ago)
• Last Synced: 2024-11-18T09:13:43.125Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://component.github.io/clipboard-dom
• Size: 225 KB
• Stars: 34
• Watchers: 6
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# clipboard-dom

  Makes a DOM element (i.e. <button>) write to the system clipboard. This

  component is based off of the [ZeroClipboard](https://github.com/jonrohan/ZeroClipboard)

  project, and in fact uses the same SWF Flash code.

## Installation

```

$ component install component/clipboard-dom

```

## Example

``` html

  

    

    


      Copy to Clipboard

    

    

    

  


```

``` js

// main.js

var Clip = require('clipboard-dom');

// set the path to the swf file first

Clip.swf('/swf/ZeroClipboard.swf');

// create a "Clip" instance

var ele = document.getElementById('copy-button');

var parent = ele.parentNode; // parent should "have layout"

var clip = new Clip(ele, parent);

// listen for meaningful events

clip.on('load', function(){

  console.log('button loaded');

});

clip.on('complete', function(text){

  console.log('copied text to the clipboard:', text);

});

clip.on('mousedown', function() {

  // "mousedown" is the last chance to set the text before it gets copied

  var input = document.getElementById('copy-text');

  clip.text(input.value);

});

```

## Events

### "load"

Fired when the SWF movie for the clipboard instance has loaded.

### "complete"

Fired when the user clicks on the button and the text has been copied.

The text that got copied is passed in as an argument.

### "mouseover"

Fired when the user mouses over the button.

### "mouseout"

Fired when the user mouses away from the button.

### "mousedown"

Fired when the user pressed the mouse down on the button.

### "mouseup"

Fired when the user releases the mouse from the button.