Super simple, completely configurable, copy to clipboard.
-
Add the JavaScript before the
</body>(required)<script src="clipboard.js"></script>
or via jsDeliver:
<script src="https://cdn.jsdelivr.net/gh/signified/clipboard@1.0.0/clipboard.min.js"></script>
-
Add the stylesheet in the
<head>(optional)<link rel="stylesheet" href="clipboard.css">
or via jsDeliver:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/signified/clipboard@1.0.0/clipboard.min.css">
Note: The supplied stylesheet applies default positioning and basic styling rules. Feel free to use it as a starting point or, if you're using a framework like Bootstrap or Tailwind CSS, make use of the options to take full advantage of the component and utility classes these frameworks provide.
Usage examples can be found at https://signified.github.io/clipboard.
clipboard(selectors, options, callback(clipboard, element));A string containing one or more selectors to match against. For example, 'pre' will match every <pre> element.
An object representing optional configuration options.
{
// The position of the `template` relative to the selected `element`.
// Possible values are:
// 'beforebegin': Before the `element` (default).
// 'afterbegin': Inside the `element`, before its first child.
// 'beforeend': Inside the `element`, after its last child.
// 'afterend': After the `element`.
position: 'beforebegin'
// The HTML to use when creating the `clipboard`.
template: '<div class="clipboard"><button class="clipboard-button" type="button">Copy</button></div>'
}A callback function with parameters representing, for each selectors, the clipboard and the selected element.
See Contributing.
See Contributors.
See LICENSE.