clipboard.js 是一个完全使用js实现的将文本复制到剪切板的工具。不依赖flash.也不依赖框架,体积小巧,压缩版本只有3kb。
开发缘由:世面上实现文本复制的代码,不是配置繁琐就是依赖flash,这就是开发 clipboard.js 的初衷。
安装:可以直接使用npm安装。
npm install clipboard --save
或者直接下载压缩包
设置:引入 dist 中的脚本,或者从第三方CDN引入。
<script src="dist/clipboard.min.js"></script>
然后你需要通过传递一个DOM,或者HTML元素,或者HTML元素组,将其实例化
new ClipboardJS('.btn');
使用:本js充分利用了html5 data属性的优势。
从其他位置复制文本:点击复制时将会把id="foo"的内容复制到剪切板
<!-- 复制文本的目标位置 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- 触发 -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="复制">
</button>
从其他位置剪切文本: 点击剪切时将会把id="bar"的内容剪切到剪切板
<!-- 剪切的目标位置 -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- 触发 -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
剪切
</button>
从属性复制文本:点击复制时将会把data-clipboard-text的内容复制到剪切板
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
复制
</button>
浏览器支持
