在谷歌Chrome、微软Edge 和苹果 Safari 等都陆续宣布停止支持Flash插件的情况下,clipboard.js 实现了纯JS复制到剪贴板,无Flash, 压缩后只有3KB大小,还无需要依赖第三方库。
你可以通过 npm 来安装它。
npm install clipboard --save
1.HTML代码
<button class="btn">点击复制</button>
2.引用clipboard.js
<script src="dist/clipboard.min.js"></script>3.然后你需要通过传入一个DOM选择器或HTML 元素, 或者 HTML 元素数组作为参数,来实例化对象。
new Clipboard('.btn');
实例1代码:
<button class="btn">点击复制</button> <script src="dist/clipboard.min.js"></script> <script> var clipboard = new ClipboardJS('.btn', { text: function() { return '复制的内容'; } }); </script>以上就是基本实现了点击复制内容的功能了。这就结束了吗?当然没有
clipboard.js 还支持HTML5的DATA属性来提高可用性
data-clipboard-targe --- 从另一个元素复制或剪切文本
data-clipboard-action --- 属性来指明你想要复制还是剪切内容。默认为 (copy)
实例2代码:
<!-- Target --> <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger --> <button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy"> <img src="assets/clippy.svg" alt="Copy to clipboard"> </button>以上码会实现复制 input 中的 value值。
另外需要知道的是 data-clipboard-action 属性为剪切(cut)时只支持对 input 和 textarea 元素的内容剪切。
container
:设置获得焦点的元素 //如果在 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用。 //你会希望将获得焦点的元素设置为 container 属性的值。 new Clipboard('.btn', { container: document.getElementById('modal') });
destroy()
:清理事件以及创建的对象 var clipboard = new Clipboard('.btn'); clipboard.destroy();
success
:触发success事件 clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); });
error
:触发error事件 clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
1. 本站所有资源来源于网络和用户上传!如有侵权请邮件联系客服!sys(at)hoohtml.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!
3. 本由本站提供的程序对您的网站或计算机造成严重后果的本站概不负责。