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

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>

Install using NPM:

npm i simple-copy.js

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) {
    ...
});

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>

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>

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

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

Latest ✔	Latest ✔	Latest ✔	Latest ✔	10+ ✔	9+ ✔