clipboard.js不需要Flash 也不需要依赖任何js库来复制和剪切文本

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

运行渲染：

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

编写src=' http : clipboard . min . js '/脚本，然后在正文中添加要复制或剪切的文本字段内容和按钮。

输入id=' foo ' value='//www . JB 51 . net/article/73145 . htm ' 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对应的内容。

按钮类=' BTN '数据-剪贴板-文本='这里是要复制的内容' aria-label='复制成功！'复制/按钮Javascript会将下一个代码添加到脚本的before /body中，保存并浏览，然后点击按钮进行复制。

新建剪贴板('。BTN’)；当然，我们可以进一步处理。例如，当复制完成时，提示复制成功更友好，只要执行以下代码：

var剪贴板=新剪贴板('。BTN’)；clipboard.on('success '，function(e){ var msg=e . trigger . GetAttribute(' aria-label ')；警报(msg)；e . ClearSelection()；});也就是我们不需要flash，也不依赖任何其他js库来实现文本复制和剪切的过程，希望对大家的学习有所帮助。