效果图如下：

我们在网页上放了一个复制按钮，主要是为了方便用户复制链接等复杂文本。过去我们用js依赖Flash，甚至用jQuery庞大的JS库将文本复制到剪贴板。今天要给大家介绍的是一个非常现代化的插件，它不需要flash，也不依赖于任何其他js库。它被称为剪贴板. js

查看演示下载源代码。

超文本标记语言

首先，加载本地剪贴板. js文件。

复制的代码如下： script src=' http : clipboard . min . js '/script。

然后在正文中添加要复制或剪切的文本字段内容和按钮。

复制代码如下：输入id=' foo ' value='//www . jb51 . net/demo/clipboard/' button class=' BTN ' data-clipboard-target=' # foo ' aria-label='复制成功！'复制/按钮

这里我们使用HTML5的data- attribute定位复制对象的目标，指向文本字段#foo，表示复制#foo中的值内容，aria-label属性定义复制成功后的信息，用于提示复制结果信息。

还有一个属性数据-剪贴板-动作，定义当前操作是复制还是剪切，默认是复制。当数据-剪贴板-动作='剪切'时，点击按钮会剪切文本，就像WORD操作一样。当然，剪切操作只适用于文本和textarea。

或者我们不需要输入、textarea等元素作为复制对象，可以通过ata-clipboard-text属性在按钮上定义要复制的内容，点击按钮复制到ata-clipboard-text对应的内容。

复制代码如下： button class=' BTN ' data-clipboard-text='这里是要复制的内容' aria-label='复制成功！'复制/按钮

java描述语言

将下一个代码添加到脚本before /body中，保存并浏览，然后单击按钮进行复制。

新建剪贴板('。BTN’)；

当然，我们可以进一步处理。例如，当复制完成时，提示复制成功更友好，只要执行以下代码：

var剪贴板=新剪贴板('。BTN’)；clipboard.on('success '，function(e){ var msg=e . trigger . GetAttribute(' aria-label ')；警报(msg)；e . ClearSelection()；});以上内容是边肖与大家分享的。它不依赖Flash或任何JS库来复制和剪切文本以及下载附带的源代码。希望你喜欢。