JavaScript实现点击复制功能的两种兼容方案

验证码：<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()">
<script type="text/javascript">
function fuzhi(){
var codeVal=jQuery("#code").val();
alert(codeVal);
if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) { //IE浏览器
clipboardData.setData('Text', codeVal);
alert("已经复制到剪切板");
} else {
prompt("请复制:", codeVal);
} 
// window.clipboardData.setData("Text",jQuery("#code").val());
} 
</script>

方法一：逐一判别处理法

最近都没有什么心情去写博文，主要因为心烦的事情渐渐多起来了。

回到正题，关于使用JS实现点击复制功能，下文介绍的方法与网络上的常见方案类似。JS实现复制本身并不复杂，最大的难点在于浏览器兼容性，因为使用非IE浏览器的用户依然众多。本文基于网络资源对实现方法进行了总结。

基本思路是通过判断客户端浏览器的类型，执行不同的JS代码来实现复制功能。虽然理论上可行，但实际开发中并不如想象中简单，因为不同浏览器下JS复制代码的写法存在差异，目前作者仅熟悉IE和Firefox的处理方式。

若仅需兼容IE和Firefox，实现相对简单。这里采用一种知名的判断IE内核的方法，即“13字节法”，这也是作者常用的判断手段。

 
if("\v"=="v") {//13个字节
//这里是IE核，执行的代码，亲测兼容IE8
}else{
//非IE核执行代码
} 

这里给出一个实现复制的大致框架，具体代码未完全列出，网上可轻松找到相关资源供参考。

 
function clipBoard(object){
//获取object的值，即复制内容
var copyTxt=document.getElementById(object).value;
//调用copy2Clipboar来实现浏览器，判断及执行代码
if(copy2Clipboard(copyTxt)!= false){
alert('复制成功');
} 
} 
copy2Clipboard = function(txt){
if("\v"=="v") {
//IE浏览器执行代码
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true;
}else if(navigator.userAgent.indexOf("Firefox")>0){
//Firefox浏览器
return true;
}else if(window.google && window.chrome){
//chrome浏览器
return true;
}else{
alert("浏览器不支持");
return false;
} 
} 

可根据需要自行添加不同浏览器的判断代码，以实现该浏览器下的复制功能。一般情况下，建议按照IE > FF > opera/chrome > 其他浏览器的顺序进行判断。

方法二：Flash间接处理法

该方法的原理是创建一个Flash对象，将复制内容作为变量传递给Flash，由Flash将内容复制到内存中，从而实现复制功能。只要浏览器支持Flash，理论上可兼容绝大部分浏览器。此方法为作者近期发现并测试验证的方案。

安装及使用方法可在官方网址查阅，英文版本可直接访问，中文版本需通过搜索获取。

这里提供一个简化版的实现框架，结合了上述方法。根据官方文档说明，在单页面中实现该功能较为容易，但在某些CMS系统中应用时可能会遇到问题。例如，IE内核页面可能会弹出“该页面已终止”的错误。原因是JS加载未完成即被调用。针对这一IE特有的问题，可以使用判断IE的方法将IE独立处理，其他内核浏览器则使用Flash方法实现。

 
function checkClient(object){//判断浏览器
var copyTxt=document.getElementById(object).value; //获取复制的内容
if("v"!="v") {
//这里根据官方文档设置
//这里设置flash位置，绝对相对都可以
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
//创建一个复制对象
var clip = new ZeroClipboard.Client();
//设置手形
clip.setHandCursor(true);
//设置复制的内容
clip.setText(copyTxt);
//设置触发对象
clip.glue('d_clip_button');
} 
} 

此处用于判断是否为IE内核，若是IE内核，则不使用Flash处理法，而是直接使用原生复制机制。

 
//复制处理
function clipBoard(object){
var copyTxt=document.getElementById(object).value;
if(copy2Clipboard(copyTxt)!= false){
alert('复制成功');
} 
} 
copy2Clipboard = function(txt){
if("\v"=="v") { //判断是否是IE浏览器
window.clipboardData.clearData();
window.clipboardData.setData("Text",txt);
return true;
} 
}else{ //非IE核直接返回
return true;
} 

以上为第二种方法的最简设置，将代码放置于<head></head>之间即可。无论是第一种还是第二种方法，都需要在需要复制的页面上添加以下两行代码。

 
<input type="text" id="textinfo"
onmouseout="checkClient('textinfo')" value="复制的内容" size="65"/>

设置触发对象按钮

 
<div id="d_clip_button" onclick="copyCode('textinfo')">复制地址</div>

这是第二种方法需要添加的部分，用于检测浏览器。

 
<script>checkClient('textinfo');</script>

大致步骤如上，其中部分ID名称可根据实际需求进行修改。完整代码可参考官方提供的Demo。

写作至此，略感疲惫。