在本教程中，我们将学习关于clipboard.js的信息，它有助于将文本复制到剪贴板。

安装

如果您已安装Node和NPM，则使用以下命令作为依赖项在项目中安装剪贴板。

npm install clipboard --save

或者，从那里的GitHub存储库下载最新版本。

或者，从CDN获得它。

步骤1：包含脚本

在页面中包含剪贴板脚本。

<script src="path/to/clipboard.min.js"></script>

步骤2：创建标签

创建一个输入元素并设置一些值。

<input id="foo" value="Hello World">

现在，创建一个将触发复制事件的按钮。

<button class="clipboard" data-clipboard-target="#foo">Copy</button>

注意！我们在按钮上添加了"剪贴板"类，该类将用于实例化剪贴板。
我们还向按钮添加了一个属性" data-clipboard-target"。
它的值设置为" #foo"，这意味着它的目标是具有" id =" foo"的元素。

步骤3：实例化

接下来，我们实例化Clipboard对象，然后传递上面按钮中使用的.clipboard类。

var clipboard = new Clipboard(".clipboard");

例

在下面的示例中，我们有一个输入字段和一个按钮。
单击按钮后，将复制输入字段的内容。

点击复制

HTML

<input id="foo" value="Hello World from the input field.">

<button class="clipboard" data-clipboard-target="#foo">Click to copy</button>

JavaScript

var clipboard = new Clipboard(".clipboard");

在下面的示例中，我们有一个文本区域，然后单击按钮将其内容复制。

Hello World from the textarea.

HTML

<textarea type=&apos;text&apos; id=&apos;my-textarea&apos; rows=&apos;6&apos;>Hello World from the textarea.</textarea>

<button class=&apos;clipboardjs&apos; data-clipboard-target=&apos;#my-textarea&apos;>Click to copy</button>

JavaScript

var clipboard = new Clipboard(".clipboardjs");