点击复制的实现 (兼容多种浏览器)

点击链接或者按钮，即可复制指定部分的文字内容到系统的粘贴板，方便用户粘贴到目标区域。这是改善用户体验的一种很好的方式。实现这种方式在不同浏览器下需要不同的实现机制，主要是IE和非IE的区别。

IE下直接调用window.clipboardData.setData即可实现，非IE下，需要通过一个Flash(_clipboard.swf)文件中转。

上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" media="screen" href="" />
</head>

<body>
<input type="text" id="copyDemo" value="ThiÂ¡ ÃƒÂ© ÃƒÂ ÃƒÂº ÃƒÂ½ ÃƒÂ¾ ÃƒÂ¦ s tex#$&*^@?%t is just for testing." /><a
href="javascript:void(0)" id="clickCopy">点我复制</a>
</body>
</html>
<script>
function copystr(text2copy){
var global_str = "已复制，使用Ctrl+V粘贴出来";
if (window.clipboardData) {
window.clipboardData.setData("Text",text2copy);
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
alert(global_str);
}
function $(id) {
return document.getElementById(id);
}
$('clickCopy').onclick = function(){copystr($('copyDemo').value);}
</script>

代码中用到的flash文件“ _clipboard.swf”点击这里下载(来自jeffothy),

另有完善的方案，首先，使用该方法必须要保证用户浏览器支持JavaScript，其次，如果用户使用非IE浏览器，则需要支持Flash。为了检测Flash的支持，添加了SWFObjet.js的支持，来完美实现。

代码原型出自《Auto copy to clipboard》
更加完善的方案参见《cross browser clipboard copy with pop over message》

更多相关阅读

htmlDecode.js (出自MSDN)
events.js (出自Edwards)

【更新】

update 2009-11-13: 采用flash传递到剪贴板的方法，在最新的flash player 10中失效。

藏井阁

点击复制的实现 (兼容多种浏览器)

标签

友情链接