Simple-copy.js NPM

simple-copy.js

Copy DOM, textarea or fields values to clipboard, no Flash, only 2.3kB minified (1.14kB gzipped).

Setup

Include lib

<script src="simple-copy.min.js"></script>

Or use CDN:

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

Import:

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

Import ES6 (and "libs" like Angular/Vue-cli):

import SimpleCopy from 'simple-copy.js'

RequireJS:

requirejs(['folder/foo/bar/simple-copy'], function (SimpleCopy) {
    ...
});

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>

Copying values from selectmultiple

Using API for copy multiple values in <select multiple></select>:

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

In example comma is used to join multiple values, returning foo,bar,baz, if change to:

SimpleCopy.copy("<selector>", { "multiple": "|" });

Returns: foo|bar|baz

You can use data attribute for copy multiple values in <select multiple></select>, example:

<select multiple class="foobar">
    <option value="foo">Foo</option>
    <option value="Bar" multiple>Bar</option>
    <option value="Baz">Baz</option>
    <option value="fooled you!" multiple>Bazinga</option>
</select>

<button
    data-simplecopy-target=".foobar"
    data-simplecopy-multiple=","
>Copy</button>

API

Method	Description
`SimpleCopy.copy(target[, options])`	Copy the contents of an HTML element
`SimpleCopy.select(target[, options]);`	Select the contents of an HTML element
`SimpleCopy.data(text);`	Set plain text in clipboard

Options

In SimpleCopy.copy and SimpleCopy.select you can define behavior, example:

SimpleCopy.copy(target, {
    "text": true
});

Property	type	default	description
`text:`	`bool`	`false`	If `true` copy node without markup (only text). Available only `SimpleCopy.copy`
`node:`	`bool`	`false`	If `true` copy entire node, if `false` copy node contents. Available in `SimpleCopy.copy` and `SimpleCopy.select`
`multiple:`	`string`	`null`	This property is only used when copy `<select multiple>` only, if `multiple` is not defined only first option selected is setted in clipboard, if define a "separator" like `;` is setted in clipboard something like this: `foo;bar;baz` (for each selected option). Available only `SimpleCopy.copy`

HTML5 data attribute

Property	equivalent	example	description
`data-simplecopy-target`	-	`<button data-simplecopy-target="<selector>">Copy</button>`	-
`data-simplecopy-select`	`SimpleCopy.select(<selector>)`	`<button data-simplecopy-target="<selector>" data-simplecopy-select="true">Copy</button>`	-
`data-simplecopy-text`	`text:`	`<button data-simplecopy-target="<selector>" data-simplecopy-text="true">Copy</button>`	-
`data-simplecopy-node`	`node:`	`<button data-simplecopy-target="<selector>" data-simplecopy-node="true">Copy</button>`	-
`data-simplecopy-multiple`	`multiple:`	`<button data-simplecopy-target="<selector>" data-simplecopy-multiple=";">Copy</button>`	-
`data-simplecopy-data`	`SimpleCopy.data(<text>)`	`<button data-simplecopy-data="<text>">Copy</button>`	-
`simple-copy-ignore`	-	`<element data-simplecopy-ignore="true">.....</element>`	Ignore element if parents elements has `data-simplecopy-text` or if uses `SimpleCopy.copy(target, { "text": true });`

jQuery clipboard API

Method	Equivalent
`$("<selector>").simpleCopy("copy")`	`SimpleCopy.copy("<selector>")`
`$(element).simpleCopy("copy")`	`SimpleCopy.copy(element)`
`$("<selector>").simpleCopy("copy", { "text": true })`	`SimpleCopy.copy("<selector>", { "text": true })`
`$("<selector>").simpleCopy("copy", { "node": true })`	`SimpleCopy.copy("<selector>", { "node": true })`
`$("<selector>").simpleCopy("copy", { "multiple": ";" })`	`SimpleCopy.copy("<selector>", { "multiple": ";" })`
`$("<selector>").simpleCopy("select")`	`SimpleCopy.select("<selector>")`
`$(element).simpleCopy("select")`	`SimpleCopy.select(element)`
`$("<selector>").simpleCopy("select", { "node": true })`	`SimpleCopy.select("<selector>", { "node": true })`