复制文本到剪贴板不应该很困难。它不需要复杂的步骤来配置或加载几百 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-