基于js实现复制内容到操作系统粘贴板过程解析
更新时间：2019年10月11日 09:50:18 作者：德邦总管
这篇文章主要介绍了基于js实现复制内容到操作系统粘贴板过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
一、如果只考虑IE浏览器，可以直接用原声js实现(兼容IE、谷歌、火狐等浏览器)
if(window.clipboardData){
//清空操作系统粘贴板
window.clipboardData.clearData();
//将需要复制的内容复制到操作系统粘贴板
window.clipboardData.setData("Text", "要复制的内容");
}
二、如果是其他浏览器，上面的办法行不通，其他浏览器出于安全的考虑禁止js访问操作系统粘贴板。
这里需要用到插件，网上流行的插件有两种，一种是ZeroClipboard.js，一种是clipboard.js。
插件下载地址：https://zenorocha.github.io
1.用ZeroClipboard.js插件需要用到以下三个文件：
- ZeroClipboard.js
- ZeroClipboard.min.js
- ZeroClipboard.swf
这个插件需要浏览器的flash控件支持，复制时先把内容复制到flash里面，再利用flash将内容复制到
操作系统。flash控件又被淘汰的可能，有些浏览器上兼容得也不太好，所以这个插件不太好用。
2.用clipboard.js插件需要用到以下一个文件：
clipboard.min.js
执行复制功能的html标签上需要加上一个属性和一个样式，属性data-clipboard-text的值表示要复制的内容，
样式js-copy表示该标签被绑定上点击复制的功能，在点击该标签时触发复制功能。
该插件兼容IE、谷歌、火狐等浏览器。
js示例代码如下：
$("span").each(function(index,element){if(element.innerHTML=="复制")new Clipboard($(element).parent().attr("data-clipboard-text",Ext.fly(html).dom.innerText).addClass("js-copy")[0]);});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
背景：很久之前就在marry5.com看到这个效果，当时觉得很神奇，碍于水平有限，没做出来。2008-09-09
这篇文章主要为大家详细介绍了BootStrap modal模态弹窗使用小结,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了Javascript动画插件lottie-web的使用方法，包括配合vue-cli使用及在HTML页面中使用代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-02-02
这篇文章主要给大家介绍了关于javascript删除数组元素的七个方法，文中通过示例代码介绍的非常详细，对大家学习或者使用javascript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-09-09
这篇文章主要介绍了微信js-sdk界面操作接口用法,结合实例形式分析了微信界面操作的相关接口功能与使用技巧,需要的朋友可以参考下2016-10-10
S.Sams Lifexperience CopyRight (C) 2003-2007 S.Sams Lifexperience ScriptClassLib MSNLive: S.Sams#msn.com Update by : 2007-01-19 转载传播请保留版权2008-06-06
这篇文章主要和大家谈一谈bootstrap响应式布局，本教程讲解如何在网页布局中应用响应式设计，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下2017-09-09
表单元素事件 (Form Element Events)仅在表单元素中有效。2009-07-07
Toast相信对于利用微信小程序开发的朋友们来说都不陌生，有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成WeToast，这篇文章主要给大家介绍了微信小程序开发之实现自定义Toast弹框的相关资料，需要的朋友可以参考下。2017-06-06
最新评论