基于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]);});

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

• JavaScript实现复制内容到粘贴板代码
• react.js组件实现拖拽复制和可排序的示例代码
• JS插件clipboard.js实现一键复制粘贴功能
• jQuery实现简单复制json对象和json对象集合操作示例
• clipboard.js在移动端复制失败的解决方法
• JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】
• js实现点击按钮复制文本功能
• JavaScript复制内容到剪贴板的两种常用方法