Directory

← Back

clipboard-copy-element

Copy element text content or input values to the clipboard.

Author

Rating

Popularity

<100

<clipboard-copy> element

Copy element text content or input values to the clipboard.

Installation

$ npm install --save clipboard-copy-element

Usage

import 'clipboard-copy-element'
<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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-04-22
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

clipboard-copy-element - Vaadin Add-on Directory

Copy element text content or input values to the clipboard. clipboard-copy-element - Vaadin Add-on Directory
# <clipboard-copy> element Copy element text content or input values to the clipboard. ## Installation ``` $ npm install --save clipboard-copy-element ``` ## Usage ```js import 'clipboard-copy-element' ``` ```html Copy path
src/index.js
``` ## Data sources ### Attribute ```html Copy ``` ### Element content ```html Copy
src/index.js
``` ### Form input ```html Copy ``` ### Hyperlink href ```html Copy full URL Link text will not be copied ``` ## Events After copying to the clipboard, a `clipboard-copy` event is dispatched from the `` element: ```js document.addEventListener('clipboard-copy', function(event) { const button = event.target button.classList.add('highlight') }) ``` ## Browser support Browsers without native [custom element support][support] require a [polyfill][]. - Chrome - Firefox - Safari - Microsoft Edge [support]: https://caniuse.com/#feat=custom-elementsv1 [polyfill]: https://github.com/webcomponents/custom-elements ## Development ``` npm install npm test ``` ## License Distributed under the MIT license. See LICENSE for details.
Online