simple-copy.js

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 select[multiple]

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 })

Browser Support

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