"复制到剪贴板" 是我们日常工作中最常用到的一种操作, 几乎每天都有使用很多次, 但 JavaScript 客户端 API 对这个功能只提供了非常有限的支持, 有些老的 API 和老式的浏览器在你复制时会弹出讨厌的 "你真的要这样做吗?" 类似的确认框, 非常不方便, 不友好. 在几年前我曾有一篇文章里谈论过用 ZeroClipboard 实现 JavaScript 剪贴板操作, 虽然是可以实现, 但有一个弊端, 它使用的是 flash 技术, 而如今, 很多浏览器开始不支持 flash 技术, 所以, 我们需要不依赖 flash 技术的 JavaScript 方法来实现浏览器端的剪贴板操作. 今天给大家介绍的就是用纯 JavaScript 实现的解决方案: clipboard.JS https://clipboardjs.com/ .
这个 clipboard.JS 里提供的 "复制的剪贴板"API 非常的简洁方便, 下面就是它的一些用法:
用 JavaScript 拷贝, 剪贴 Textarea 和 Input 里的数据
- /* Textarea - Cut
- <textarea id="bar">hello</textarea>
- <button class="copy-button" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
- */
- var clipboard = new Clipboard('.copy-button');
- /* Input - Copy
- <input id="foo" value="hello" type="text">
- <button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
- */
- var clipboard = new Clipboard('.copy-button');
拷贝元素的 innerhtml 内容
- /* HTMLElement - Copy
- <div id="copy-target">hello</div>
- <button class="copy-button" data-clipboard-action="copy" data-clipboard-target="#copy-target">Copy</button>
- */
- var clipboard = new Clipboard('.copy-button');
Target 和 Text 的用法
- // Contents of an element
- var clipboard = new Clipboard('.copy-button', {
- target: function() {
- return document.querySelector('#copy-target');
- }
- });
- // A specific string
- var clipboard = new Clipboard('.copy-button', {
- text: function() {
- return 'clipboard.js is awesome!';
- }
- });
事件关联
- var clipboard = new Clipboard('.btn');
- clipboard.on('success', function(e) {
- console.log(e);
- });
- clipboard.on('error', function(e) {
- console.log(e);
- });
演示
不依赖 flash,API 非常简单, 所有的主流浏览器都支持 clipboard.JS https://clipboardjs.com/ .Flash 已死, web 新技术长存!
来源: http://www.webhek.com/post/javascript-copy-clipboard.html