复制文本到剪贴板不应该很困难。它不需要复杂的步骤来配置或加载几百 KB 的代码。但最重要的是，它不应该依赖于 Flash 或任何臃肿的框架。

方法

访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js

下载clipboard.min.js，并在页面中引用

<!-- clipboard Script --> 
 <script type="text/javascript" src="script/clipboard.min.js"></script> 

在script中写实例化语句：

<script type="text/javascript"> 
 $(document).ready(function(){ 
 var clipboard = new Clipboard('.btn'); 
} 
</script> 

写页面按钮，实现点击按钮复制指定内容

<button class="btn" data-clipboard-text="http://www.hbcloudwide.com/oss/video/7">点击复制</button> 

使用

我们生活在一个声明复兴时期，这就是为什么我们决定要充分利用 HTML5 的 data 属性。

从另一个元素中复制文本

一个相当普遍的用例是从另一个元素中复制内容。你可以通过在触发元素中添加一个 data-clipboard-target 属性来实现。

你在该属性中包含的值需要匹配其他元素选择器。

<!-- 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>

从另一个元素中剪切文本

此外，你还可以定义一个 data-clipboard-action 属性来指定你想要复制 copy 还是剪切 cut 内容。

如果你省略了这个属性，那么默认行为是复制 copy。

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

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

正如你可能会想到的，剪切 cut 行为只能在 <-input-> 或<-textarea-> 元素上使用。

从属性中复制文本

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

当然，clipboard.js还可以实现多种复制或剪切效果。具体用法参看github项目主页即可。

-END-