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/[email protected]/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) {
    ...
});

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+ ✔