@reallyland/really-clipboard-copy
Copy content to clipboard
!tippin.metippin-me-badgetippin-me-url
!Follow mefollow-me-badgefollow-me-url!Versionversion-badgeversion-url !lit-elementlit-element-version-badgelit-element-url !Node versionnode-version-badgenode-version-url !MIT Licensemit-license-badgemit-license-url
!Downloadsdownloads-badgedownloads-url !Total downloadstotal-downloads-badgedownloads-url !Packagephobiapackagephobia-badgepackagephobia-url !Bundlephobiabundlephobia-badgebundlephobia-url
!CircleCIcircleci-badgecircleci-url !Dependency Statusdaviddm-badgedaviddm-url
!codebeat badgecodebeat-badgecodebeat-url !Codacy Badgecodacy-badgecodacy-url !Code of Conductcoc-badgecoc-url
Better element for the web
Table of contents
Pre-requisites
- Java 8java-url (
web-component-testerworks without any issue with Java 8) - Node.jsnodejs-url >= 8.16.0
- NPMnpm-url >= 6.4.1 (NPMnpm-url comes with Node.jsnodejs-url, no separate installation is required.)
- (Optional for non-VS Codevscode-url users) Syntax Highlighting for lit-html in VS Codevscode-lit-html-url
- web-component-testerweb-component-tester-url >= 6.9.2 (For running tests, it's recommended to install globally on your system due to its insanely huge install size by running
npm i -g web-component-tester.)
Installation
# Install via NPM
$ npm install @reallyland/really-clipboard-copyUsage
index.html<html>
<head>
<script type="module">
import 'https://unpkg.com/@reallyland/really-clipboard-copy@latest/dist/really-clipboard-copy.js?module';
const asyncCopyEl = document.body.querySelector('.async-copy');
const syncCopyEl = document.body.querySelector('.sync-copy');
asyncCopyEl.addEventListener('copy-success', (ev) => {
const { value } = ev.detail || {};
console.log(`Copied value is ${value}`);
});
asyncCopyEl.addEventListener('copy-error', (ev) => {
const { reason } = ev.detail || {};
console.error(reason);
});
syncCopyEl.addEventListener('copy-success', (ev) => {
const { value } = ev.detail || {};
console.log(`Copied value is ${value}`);
});
syncCopyEl.addEventListener('copy-error', (ev) => {
const { reason } = ev.detail || {};
console.error(reason);
});
</script>
</head>
<body>
<h2>Copy input text using Async Clipboard API if supported</h2>
<really-clipboard-copy class="async-copy">
<input copy-id="copiable" type="text" readonly value="Hello, World!" />
<button copy-for="copiable">Copy</button>
</really-clipboard-copy>
<h2>Copy input text only using document.execCommand('copy')</h2>
<really-clipboard-copy class="sync-copy" sync>
<input copy-id="copiable" type="text" readonly value="Hello, World!" />
<button copy-for="copiable">Copy</button>
</really-clipboard-copy>
</body>
</html>Browser compatibility
really-clipboard-copy works in all major browsers (Chrome, Firefox, IE, Edge, Safari, and Opera).Heavily tested on the following browsers:
| Name | OS | | --- | --- | | Internet Explorer 11 | Windows 7 | | Edge 13 | Windows 10 | | Edge 17 | Windows 10 | | Safari 9 | Mac OS X 10.11 | | Safari 10.1 | Mac OS 10.12 | | Chrome 41 (WREwre-url) | Linux | | Chrome 69 (WRE 2019wre-2019-url) | Windows 10 | | Firefox 62 (w/o native Shadow DOM) | macOS Mojave (10.14) | | Firefox 63 (native Shadow DOM support) | Windows 10 |
