js实现复制到剪贴板功能，兼容所有浏览器

来源：互联网发布：机械加工工艺软件编辑：程序博客网时间：2024/04/30 01:12

前段时间做项目的时候，有点击按钮复制文本的需求，想使用操作windows剪切板实现，在网上查了些资料，发现目前好像只有IE支持直接访问剪切板，实现需求的时候也只做了IE中的点击复制功能，其余浏览器：

if(window.clipboardData){window.clipboardData.setData("text" , textvalue);}else{//提示非IE浏览器不支持该操作代码}

上面的实现方式确实很敷衍（需求实现了，但是没有兼容性）。虽然很多文章中介绍zeroclipboard，但是强迫症犯了，不想用……

zeroclipboard

实现原理

Zero Clipboard 利用 Flash 进行复制，之前有Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮或是其他元素之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。

实现步骤

首先下载 Zero Clipboard （点击下载），并解压缩。将文件：ZeroClipboard.js和 ZeroClipboard.swf ，放到项目中，下面的测试代码将两个文件放到了目录webapp/zeroclipboard/

测试代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="Pragma"content="no-cache"><metahttp-equiv="Cache-Control" content="no-cache"><meta http-equiv="Expires"content="0"><title>Copy2Clipboard</title></head><body>         <button id="copy_button" data-clipboard-target="copy_textarea"><b>复制到剪贴板</b></button><br/><br/>         <textarea id="copy_textarea" rows="20" cols="100">待复制内容</textarea></body></html><script type="text/javascript"src="zeroclipboard/ZeroClipboard.js"></script><scripttype="text/javascript">         //定义一个新的复制对象         varclip = new ZeroClipboard( document.getElementById("copy_button"), {           moviePath:"zeroclipboard/ZeroClipboard.swf"//设置ZeroClipboard.swf位置         });          //复制内容到剪贴板成功后的操作         clip.on('complete', function(client, args) {            alert("复制成功，复制内容为："+args.text);         });</script>

代码解析

上面的html在浏览器中表现

定义的复制按钮button：

zeroclipboard隐藏的flash

通过上面两个图片的对比可以看到，zeroclipboard将自己的flash隐藏在了按钮上面。使用连接或是其他元素也可以

此时，在项目中就可以进行判断，如果是支持window.clipboardData则使用window.clipboardData,否则加载zeroclipboard相关js代码和资源文件，使用zeroclipboard完成复制文本到剪切板的功能。在这里，IE中不使用zeroclipboard的原因有两点，第一，IE中可以随时使用window.clipboardData,但是IE的低版本不支持zeroclipboard；第二加载第三方js会浪费资源。即便是未来的IE不再支持直接访问剪切板，浏览器的怪癖检测仍然是可行的，但是换成浏览器种类检测就不一定了，比如IE10及以下检测window.navigator.userAgent,会返回下面的字符串：

"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3)"

判断其中是否包含MISE，就可以知道是不是IE，但是IE11返回的userAgent是：

"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko"

那么此时对浏览器种类的检测将失败，以至于在IE11环境下使用了zeroclipboard。所以在非常有必要的情况下再进行浏览器种类检测，比如告诉用户当前使用的浏览器及其版本，否则建议使用浏览器怪癖检测，如if(window.clipboardData){//……}。

题外话

文章开始说到强迫症犯了，不想使用zeroclipboard实现复制文本到剪切板，是因为当时感觉应该有别的解决方法，比如：模拟键盘ctrl+c，或是使用js触发文本框的剪切板事件：

function copy(){var textarea=document.getElementById("myTextarea");var textvalue=textarea.value;if(window.clipboardData){//IEwindow.clipboardData.setData("text" , textvalue);}else{//Chromeconsole.log(document.implementation.hasFeature("keyboardEvents","3.0"));var event = document.createEvent("KeyboardEvents");event.initKeyboardEvent("keydown",true,true,window,"c",0,"Ctrl",0);textarea.focus();textarea.select();textarea.dispatchEvent(event);}//FF、 OPera未测试}

正当满心欣喜时，测试失败了，虽然没有进行Firefox和Opera浏览器中的相关测试，但是仅Chrome中无法实现就已经宣告该实现方式失败了。

理论上此时应该可以访问剪切板，但是实际上非IE浏览器出于各种安全方面的考虑陆续的不再支持直接访问剪切板，在剪切板事件中访问也是失败的（本地测试）。在Chrome中即便是在剪切板事件对象中使用clipboardData.getData("text")或是setData("text/plain","新的剪切板内容")也是失败的，测试到这里，自己的实现思路还是放弃吧，再争扎已经没有意义了。

0 0