### Install clipboard.js via npm

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use npm to install the clipboard.js package. This is the recommended method for projects using a package manager.

```bash
npm install clipboard --save
```

--------------------------------

### Initialize Clipboard.js for a Target Div

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-div.html

Instantiate Clipboard.js by targeting elements with the class 'btn'. This setup is for copying content from a designated div.

```javascript
var clipboard = new ClipboardJS('.btn');
```

--------------------------------

### Initialize Clipboard.js with NodeList

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html

Selects all button elements on the page and initializes Clipboard.js to handle copying for all of them. This is useful for applying copy functionality to a group of elements.

```javascript
var btns = document.querySelectorAll('button');
var clipboard = new ClipboardJS(btns);
```

--------------------------------

### Initialize Clipboard.js with Target Textarea

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-textarea.html

Initializes a new ClipboardJS instance targeting elements with the class 'btn'. It then sets up event listeners for 'success' and 'error' events to log details about the copy action.

```javascript
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});

clipboard.on('error', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Initialize Clipboard with Custom Text Function

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/function-text.html

Use this to copy text dynamically generated by a function. The function should return the string to be copied.

```javascript
var clipboard = new ClipboardJS('.btn', {
  text: function () {
    return 'to be or not to be';
  },
});
```

--------------------------------

### Instantiate ClipboardJS with a selector

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Initialize ClipboardJS by passing a CSS selector to the constructor. This will attach event listeners to all elements matching the selector.

```javascript
new ClipboardJS('.btn');
```

--------------------------------

### Initialize Clipboard.js with a DOM Element

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-node.html

Select a DOM element and pass it to the ClipboardJS constructor. Attach event listeners for 'success' and 'error' events to handle copy operations.

```javascript
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});

clipboard.on('error', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Initialize Clipboard.js with Function Target

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/function-target.html

Initializes Clipboard.js to copy content from a dynamically selected target element. The target function returns the DOM element to be copied.

```javascript
var clipboard = new ClipboardJS('.btn', {
  target: function () {
    return document.querySelector('div');
  },
});
```

--------------------------------

### Include clipboard.js via GitHack CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

Use this script tag to include clipboard.js from GitHack, which is based on RawGit. This provides access to the library hosted on GitHub.

```html
<script src="https://rawcdn.githack.com/zenorocha/clipboard.js/v2.0.11/dist/clipboard.min.js"></script>
```

--------------------------------

### Include clipboard.js via RawGit CDN (Deprecated)

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

This script tag uses RawGit to include clipboard.js. Note that RawGit is deprecated and its use is not recommended for new projects.

```html
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.11/dist/clipboard.min.js"></script>
```

--------------------------------

### Include clipboard.js via Statically CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

Use this script tag to include clipboard.js from Statically, a CDN that hosts GitHub repository files. This provides a reliable way to access the library.

```html
<script src="https://cdn.statically.io/gh/zenorocha/clipboard.js/v2.0.11/dist/clipboard.min.js"></script>
```

--------------------------------

### Include clipboard.js via unpkg CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

This script tag includes clipboard.js from unpkg, a CDN that serves files from the npm registry. It allows versioned access to packages.

```html
<script src="https://unpkg.com/clipboard@2/dist/clipboard.min.js"></script>
```

--------------------------------

### Clipboard.js Success and Error Event Handlers

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/function-target.html

Sets up event listeners for 'success' and 'error' events on the Clipboard.js instance. These handlers log details about the copy action, the copied text, and the trigger element.

```javascript
clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});

clipboard.on('error', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Include clipboard.js via jsDelivr CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

Use this script tag to include the clipboard.js library from the jsDelivr CDN. This is a popular choice for hosting open-source JavaScript libraries.

```html
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
```

--------------------------------

### Handle Copy/Cut Events

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Listen for 'success' and 'error' events to provide user feedback or capture operation details. The 'success' event provides action, text, and trigger information, and allows clearing the selection. The 'error' event provides action and trigger information.

```javascript
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});
```

--------------------------------

### Copy from Input Field

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-input-number.html

Initializes Clipboard.js to copy the value from an element with the class 'btn'. It includes event listeners for 'success' and 'error' events to log the action, copied text, trigger element, or error details.

```javascript
var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});

clipboard.on('error', function(e) {
    console.log(e);
});
```

--------------------------------

### Include clipboard.js via cdnjs CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

Include the clipboard.js library using the cdnjs CDN. cdnjs is another widely used CDN for web assets.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
```

--------------------------------

### Include clipboard.js script

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Include the clipboard.js script in your HTML file. This can be done by referencing the file in the dist folder or using a CDN.

```html
<script src="dist/clipboard.min.js"></script>
```

--------------------------------

### Programmatically Copy Text

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/text-programmatic-copy.html

This snippet shows how to copy a hardcoded string ('123') when a button is clicked. It uses the `ClipboardJS.copy()` method and logs the success status to the console.

```html
<script>
var btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  const textCopied = ClipboardJS.copy('123');
  console.log('copied!', textCopied);
})
</script>
```

--------------------------------

### Include clipboard.js via Webcache CDN

Source: https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers

This script tag includes clipboard.js from Webcache, which utilizes cdnjs for serving the library. This option provides an alternative CDN source.

```html
<script src="https://cdnjs.webstatic.cn/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
```

--------------------------------

### Handle Clipboard.js Success Event

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html

Attaches an event listener to log details when a copy action is successful. It logs the action performed, the copied text, and the trigger element.

```javascript
clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Clipboard.js Success and Error Event Handlers

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-div.html

Attaches event listeners to handle successful copy operations and errors. Logs action details, copied text, and the trigger element to the console.

```javascript
clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});

clipboard.on('error', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Handle Copy Success Event

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-input.html

Attach a success event listener to the clipboard instance. This function is called when the text is successfully copied to the clipboard, providing details about the action, copied text, and the trigger element.

```javascript
clipboard.on('success', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Copy Text from Attribute

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use this snippet to copy a predefined text directly. The trigger element must have a `data-clipboard-text` attribute containing the text to be copied.

```html
<!-- Trigger -->
<button
  class="btn"
  data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
>
  Copy to clipboard
</button>
```

--------------------------------

### Programmatic Cut with Button Click

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-programmatic-cut.html

This snippet shows how to attach an event listener to a button. When clicked, it cuts the text from the element with the ID 'bar' and logs the result to the console.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programmatic Cut</title>
    <style>
        #bar {
            width: 200px;
            height: 30px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <input id="bar" value="hello Cut">
    <button id="btn">Cut Text</button>

    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
    <script>
        var btn = document.querySelector('#btn');
        btn.addEventListener('click', () => {
            const textCut = ClipboardJS.cut(document.querySelector('#bar'));
            console.log('cut!', textCut);
        });
    </script>
</body>
</html>
```

--------------------------------

### Set Container for Modals

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Specify a 'container' option when working with libraries that alter focus, such as Bootstrap Modals, to ensure correct behavior.

```javascript
new ClipboardJS('.btn', {
  container: document.getElementById('modal'),
});
```

--------------------------------

### Handle Clipboard.js Error Event

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-nodelist.html

Attaches an event listener to log details when a copy action fails. It logs the action attempted, the text that was supposed to be copied, and the trigger element.

```javascript
clipboard.on('error', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Dynamically Set Copy Text

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use the 'text' option to dynamically determine the string to be copied. This allows for copying text based on element attributes or other dynamic content.

```javascript
new ClipboardJS('.btn', {
  text: function (trigger) {
    return trigger.getAttribute('aria-label');
  },
});
```

--------------------------------

### Programmatic Copy on Button Click

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-programmatic-copy.html

This snippet shows how to copy text from an element with ID 'bar' when a button with ID 'btn' is clicked. It logs the success status of the copy operation.

```javascript
var btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
  const textCopied = ClipboardJS.copy(document.querySelector('#bar'));
  console.log('copied!', textCopied);
})
```

--------------------------------

### Handle Copy Error Event

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/constructor-selector.html

Attach an 'error' event listener to the Clipboard.js instance to log details when a copy action fails. This includes the action type, the text that failed to copy, and the triggering element.

```javascript
clipboard.on('error', function (e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
});
```

--------------------------------

### Handle Copy Error Event

Source: https://github.com/zenorocha/clipboard.js/blob/master/demo/target-input.html

Attach an error event listener to the clipboard instance. This function is called if an error occurs during the copy operation.

```javascript
clipboard.on('error', function (e) {
    console.log(e);
});
```

--------------------------------

### Dynamically Set Target Element

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use the 'target' option to dynamically specify the element from which to copy text. This is useful when the target element is not directly related to the trigger in a static HTML structure.

```javascript
new ClipboardJS('.btn', {
  target: function (trigger) {
    return trigger.nextElementSibling;
  },
});
```

--------------------------------

### Destroy Clipboard Instance

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Clean up clipboard.js instances by calling the 'destroy' method to remove event listeners and associated objects, particularly important in single-page applications.

```javascript
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();
```

--------------------------------

### Copy Text from Another Element

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use this snippet to copy text from an input or textarea element. The trigger element must have a `data-clipboard-target` attribute pointing to the selector of the element containing the text to be copied.

```html
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
  <img src="assets/clippy.svg" alt="Copy to clipboard" />
</button>
```

--------------------------------

### Cut Text from Another Element

Source: https://github.com/zenorocha/clipboard.js/blob/master/readme.md

Use this snippet to cut text from an input or textarea element. The trigger element must have `data-clipboard-action="cut"` and a `data-clipboard-target` attribute pointing to the selector of the element containing the text to be cut. This action is only supported on input or textarea elements.

```html
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
  Cut to clipboard
</button>
```

--------------------------------

### Disable Bootstrap 3 Modal Focus Enforcement

Source: https://github.com/zenorocha/clipboard.js/wiki/Known-Issues

Use this snippet to disable Bootstrap 3's modal focus enforcement, which can interfere with clipboard.js functionality.

```js
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
```

--------------------------------

### Disable Bootstrap 4 Modal Focus Enforcement

Source: https://github.com/zenorocha/clipboard.js/wiki/Known-Issues

Use this snippet to disable Bootstrap 4's modal focus enforcement, which can interfere with clipboard.js functionality.

```js
$.fn.modal.Constructor.prototype._enforceFocus = function() {};
```

--------------------------------

### Disable jQuery UI Dialog Focus Enforcement

Source: https://github.com/zenorocha/clipboard.js/wiki/Known-Issues

This code disables jQuery UI's dialog focus enforcement, resolving conflicts with clipboard.js.

```js
$.ui.dialog.prototype._focusTabbable = $.noop;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.