将文本复制到剪贴板应该不难。配置它不须要几十个步骤,也不须要加载数百KB的js文件 。但最重要的是,它不该该依赖Flash
或任何臃肿的框架。这就是clipboard.js
存在的缘由。
从npm
安装css
npm install clipboard --save
或者,若是您不喜欢包管理,只需下载一个ZIP文件git
script
引入github
<script src="dist/clipboard.min.js"></script>
CDN
引入如今须要经过传递一个DOM
选择器、一个HTML
标签或者一组HTML
标签来实例化它web
new ClipboardJS('.btn'); //经过类名.btn的元素实例化
在内部,咱们须要获取与选择器匹配的全部元素,并为每一个元素附加事件监听器。但你猜怎么着?若是有数百个匹配项,则此操做会消耗大量内存。
所以,咱们使用事件委托,它将多个事件侦听器替换为一个侦听器。chrome
咱们正在经历一个声明性的复兴,这就是为何咱们决定利用HTML5的数据属性来得到更好的可用性npm
至关广泛的使用场景是从其余元素复制文本。在触发元素上添加 data-clipboard-target
属性,该属性值用来匹配另外一个元素选择器。api
<!-- Target --> <!-- <input id="bar" value="无敌大帅哥" > --> <p id="bar">无敌大帅哥</p> <!-- Trigger --> <button class="btn" data-clipboard-target="#bar" > 复制 </button>
另外,也能够定义 data-clipboard-action
属性为 copy/cut
来,明确操做是 复制 / 剪切
若是忽略了这个属性,便默认 复制
浏览器
<!-- 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>
标签中起做用,在其余标签中会出现事件正常调用,可是操做是失败的,粘贴板是没有改变的。框架
咱们甚至没必要须要其余承载文本的元素,仅经过 在触发元素中 添加 data-clipboard-text
属性 来完成复制ide
<!-- Trigger --> <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"> Copy to clipboard </button>
注意:
data-clipboard-text
“级别最高”,在 data-clipboard-target
等属性存在时,复制内容及相关参数以 data-clipboard-text
为准回调函数: success / error
事件名 | 参数 |
---|---|
success | event.action copy/cut 操做 |
event.text copy/cut 操做文本内容 |
|
event.triger 触发操做的DOM 元素 |
|
error | event.action copy/cut 操做 |
event.triger 触发操做的DOM 元素 |
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); });
每一个应用程序有不一样的设计需求,这就是为何clipboard.js
不包括任何CSS或内置的工具提示解决方案。
您在这个演示站点上看到的工具提示是使用GitHub的Primer构建的。若是你正在寻找类似的外观和感受,你可能想看看。
若是你不想修改你的HTML,有一个很是方便的命令式API供你使用。您所须要作的就是声明一个函数,执行您的操做,而后返回一个值。
例如 若是想动态的设置一个目标元素target
,则须要返回一个节点,即 动态设置点击复制的目标元素
new ClipboardJS('.btn', { target: function(trigger) { return trigger.nextElementSibling || document.getElementById('name'); } });
若是想动态设置内容文本text
,则返回一个字符串String
new ClipboardJS('.btn', { text: function(trigger) { return trigger.getAttribute('aria-label') || 'default text '; } });
在Bootstrap Modals
中或与任何其余更改焦点的库一块儿使用时,将但愿将焦点元素设置为 container
值。
new ClipboardJS('.btn', { container: document.getElementById('modal') });
而且,若是在单页应用中使用时,要更精确地管理DOM的生命周期,可使用如下方法清除建立的事件对象
var clipboard = new ClipboardJS('.btn'); clipboard.destroy();
这个库同时依赖于Selection
和execCommand
api。全部浏览器都支持第一个,而如下浏览器支持第二个。
好消息是,若是须要支持旧的浏览器,clipboard.js
能够优雅地降级。你所要作的就是显示一个工具提示“复制!”在调用成功事件时,由于文本已经被选中,因此在调用错误事件时,请按Ctrl+C
进行复制。
你也能够经过运行ClipboardJS.isSupported()
来检查是否支持clipboard.js
,这样你就能够从UI中隐藏复制/剪切按钮。
Chrome 和 Firefox 浏览器扩展:在 GitHub, MDN, Gist, StackOverflow, StackExchange, npm, and even Mediu 的代码块中 添加一个 "copy to clipboard" 的按钮