simple-copy.js a tiny lib for copy text and DOM

install simple-copy.js for use clipboard with dom and texts

I’ve used some great clipboard libs, however I found that occasionally most of the things I needed were something simple, I noticed this when seeing the work of other developers, who instead of using a lib made use of the basics that the API for browsers provides, the document.execDocument() (although considered obsolete).

What I realized is that a big problem (at least for me) is that although libraries are small and make use of Gzip compression, on servers disabled for this feature it ended up being something that should weigh on average ~2KB ended up becoming ~10KB (I mean separate libs), I understand perfectly that there are compression and minification strategies (which I always use) and even some “lazyload” feature, but in this process I needed something that was light, without depending on much planning.

I admit that at the beginning I didn’t think about sharing the lib prototype, but it was interesting enough, when used on servers with GZip enabled, lib got ~1,2KB, when GZip disabled it got ~2,5KB, that is, that is, a minimal difference (~1KB).

I am working so that the lib in the future will use ClipboardAPI while maintaining backward compatibility for older browsers.

Configure

You can use CDN (jsdelivr) and put directly in your page:

<script src="https://cdn.jsdelivr.net/npm/simple-copy.js@0.5/simple-copy.min.js"></script>

Can download from source: https://github.com/brcontainer/simple-copy.js/blob/0.5.2/simple-copy.min.js

Can too install using npm:

npm i simple-copy.js

And use with require():

const SimpleCopy = require('simple-copy.js');

Or use with ECMAScript modules:

import SimpleCopy from 'simple-copy.js'

Usage

Copying content from a element using selector:

SimpleCopy.copy("<selector>");

Copying text from a element using selector:

SimpleCopy.copy("<selector>", { "text": true });

Copying entire element using selector:

SimpleCopy.copy("<selector>", { "node": true });

Copying content from a element using selector:

var element = document.querySelector(".foobar");
SimpleCopy.copy(element);

Copying text from a element using selector:

var element = document.getElementById("idelement");
SimpleCopy.copy(element, { "text": true });

Copying entire element:

var element = document.getElementsByClassName("<class>");
SimpleCopy.copy(element[0], { "node": true });

Select text in a element using selector:

SimpleCopy.select("<selector>");

Select content in a element:

var element = document.querySelector(".foobar");
SimpleCopy.select(element);

Select entire node:

var element = document.querySelector(".foobar");
SimpleCopy.select(element, { "node": true });

Set text in clipboard:

SimpleCopy.data("Hello, world!");

Copy content from element defined in data attributes:

<button data-simplecopy-target="<selector>">Copy</button>

Copy entire element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>

Select content from element defined in data attributes:

<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Select text</button>

Copy html content without format:

<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>

Set text in clipboard by data attribute:

<button data-simplecopy-data="Hello, world!">Copy text</button>