js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介
clipboard.js 提供了一种更好、更现代的方法来从剪贴板复制文本。它不依赖于 Flash 或任何臃肿的框架，只是 3kb gzipped。clipboard.js 消除了将文本复制到剪贴板所带来的所有麻烦，例如配置所需的许多步骤，或者您需要加载数百 KB。
使用 clipboard.js，您可以从另一个元素复制内容，从另一个元素剪切文本，以及从属性复制文本。它支持最流行的浏览器，如果您需要支持旧浏览器，它会优雅地降级。
下载
csdn下载/download/gusijin/31791982
官网下载/projects/clipboard-js.mirror/
github下载/zenorocha/clipboard.js
引入插件
<script src="../dist/clipboard.min.js"></script>
使用
一个节点的复制
其中data-clipboard-text为复制内容
<div id="btn" data-clipboard-text="1kshdfskhksdjfhsdjfhskdfs"><span>Copy</span></div><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard by passing a HTML element --><script>var btn = document.getElementById('btn');var clipboard = new Clipboard(btn);clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script>
多个节点的复制
<!-- 1. Define some markup --><button data-clipboard-text="1">Copy</button><button data-clipboard-text="2">Copy</button><button data-clipboard-text="3">Copy</button><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard by passing a list of HTML elements --><script>var btns = document.querySelectorAll('button');var clipboard = new Clipboard(btns);clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script>
或者使用class
<!-- 1. Define some markup --><button class="btn" data-clipboard-text="1">Copy</button><button class="btn" data-clipboard-text="2">Copy</button><button class="btn" data-clipboard-text="3">Copy</button><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard by passing a string selector --><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script>
剪切文本框
<!-- 1. Define some markup --><textarea id="bar">hello</textarea><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard --><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script>
复制输入框
<!-- 1. Define some markup --><input id="foo" type="text" value="hello"><button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button><!-- 2. Include library --><script src="../dist/clipboard.min.js"></script><!-- 3. Instantiate clipboard --><script>var clipboard = new Clipboard('.btn');clipboard.on('success', function(e) {console.log(e);});clipboard.on('error', function(e) {console.log(e);});</script>
