在网页上优雅的粘贴复制clipboard.js
官网：https://clipboardjs.com/
介绍
clipboard.js是一款不依赖flash或任何重量级框架的粘贴复制插件，并且它没有任何非常复杂的配置，这也是它存在的原因。
安装
通过npm安装（或者直接下载js文件引入）npm install clipboard --save
2.引入js
<script src="dist/clipboard.min.js"></script>
//官网提供了下载地址，也可以使用免费的cdn
使用
示例
<!DOCTYPE html><html class="no-js"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><title></title><meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1" /><linkhref="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css"rel="stylesheet"/></head><body><div class="input-group" style="width: 600px;margin:200px"><inputtype="text"class="form-control"id="foo"value="https://github.com/zenorocha/clipboard.js.git"placeholder="Amount"/><div class="btn input-group-addon" data-clipboard-target="#foo">复制</div></div><script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script><script>new ClipboardJS(".btn");</script></body></html>如图书最简单的例子，单机复制按钮即可自动复制文本框的内容
换成下面就会变成剪切，主要是以下属性
data-clipboard-action="cut"
<div class="input-group" style="width: 600px;margin:200px"><inputtype="text"class="form-control"id="foo"value="https://github.com/zenorocha/clipboard.js.git"placeholder="Amount"/><div class="btn input-group-addon" data-clipboard-target="#foo" data-clipboard-action="cut">剪切</div></div><script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script><script>new ClipboardJS(".btn");</script>剪切操作仅适用于<input>或<textarea>元素
或者这样，直接复制 data-clipboard-text属性的内容
<button class="btn" data-clipboard-text="要复制的内容">复制</button>事件监听，可以打开控制台自行尝试
var clipboard = new ClipboardJS(.btn);clipboard.on(success, function(e) {console.info(Action:, e.action);console.info(Text:, e.text);console.info(Trigger:, e.trigger);e.clearSelection();});clipboard.on(error, function(e) {console.error(Action:, e.action);console.error(Trigger:, e.trigger);});高级用法
动态绑定new ClipboardJS(.btn, {target: function(trigger) {return trigger.nextElementSibling;}});动态赋值new ClipboardJS(.btn, {text: function(trigger) {return trigger.getAttribute(aria-label);}});要在Bootstrap Modals中使用或与任何其他更改焦点的库一起使用，您需要将focus元素设置为container值new ClipboardJS(.btn, {container: document.getElementById(modal)});更好的管理单页面的DOM生命周期var clipboard = new ClipboardJS(.btn);clipboard.destroy();兼容性
备注
如果需要支持更低版本的浏览器，可以参考官网的介绍，它能够优雅的降级
提供Chrome和Firefox的扩展
一个浏览器扩展，为GitHub，MDN，Gist，StackOverflow，StackExchange，npm甚至Medium中的每个代码块添加“复制到剪贴板”按钮。需要的可以私信或者前往扩展中心自行下载。
版权申明
本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。
暂无评论数据