Copy element text content or input values to the clipboard.
Перейти к файлу
dependabot[bot] ec4b83ee40
Bump http-cache-semantics from 4.1.0 to 4.1.1
Bumps [http-cache-semantics](https://github.com/kornelski/http-cache-semantics) from 4.1.0 to 4.1.1.
- [Release notes](https://github.com/kornelski/http-cache-semantics/releases)
- [Commits](https://github.com/kornelski/http-cache-semantics/compare/v4.1.0...v4.1.1)

---
updated-dependencies:
- dependency-name: http-cache-semantics
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
2023-02-04 06:53:46 +00:00
.devcontainer Add a .devcontainer 2022-02-28 17:04:01 +00:00
.github/workflows Create .github/workflows/publish.yml 2022-03-25 19:26:15 +00:00
examples Fix typo in example page texts 2021-05-05 02:26:10 +02:00
src Add back HTMLElementTagNameMap defs 2020-05-22 15:35:29 -04:00
test configure karma to use chromium 2022-01-29 00:59:22 +00:00
.eslintrc.json Include recommended rules 2020-05-26 12:42:11 -04:00
.gitignore <clipboard-copy> 2018-02-27 15:20:01 -07:00
CODEOWNERS move AOR to primer 2022-09-23 18:20:13 +01:00
LICENSE <clipboard-copy> 2018-02-27 15:20:01 -07:00
README.md Update link to polyfill 2020-10-31 16:20:29 +01:00
package-lock.json Bump http-cache-semantics from 4.1.0 to 4.1.1 2023-02-04 06:53:46 +00:00
package.json Bump minimatch and mocha 2022-11-10 11:20:17 +00:00
rollup.config.js Convert to TypeScript 2020-05-21 16:10:07 -04:00
tsconfig.json Convert to TypeScript 2020-05-21 16:10:07 -04:00

README.md

<clipboard-copy> element

Copy element text content or input values to the clipboard.

Installation

$ npm install --save @github/clipboard-copy-element

Usage

Script

Import as ES modules:

import '@github/clipboard-copy-element'

With a script tag:

<script type="module" src="./node_modules/@github/clipboard-copy-element/dist/index.js">

Markup

<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
  Copy path
</clipboard-copy>
<div id="blob-path">src/index.js</div>

Data sources

Attribute

<clipboard-copy value="src/index.js">Copy</clipboard-copy>

Element content

<clipboard-copy for="blob-path">Copy</clipboard-copy>
<div id="blob-path">src/index.js</div>

Form input

<clipboard-copy for="blob-path">Copy</clipboard-copy>
<input id="blob-path" value="src/index.js">
<clipboard-copy for="blob-path">Copy full URL</clipboard-copy>
<a id="blob-path" href="/path/to#my-blob">Link text will not be copied</a>

Events

After copying to the clipboard, a clipboard-copy event is dispatched from the <clipboard-copy> element:

document.addEventListener('clipboard-copy', function(event) {
  const button = event.target
  button.classList.add('highlight')
})

Browser support

Browsers without native custom element support require a polyfill.

  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Development

npm install
npm test

License

Distributed under the MIT license. See LICENSE for details.