今天给博客的代码高亮下面加了一个小按钮–点击复制到剪贴板，不华不实的小功能…仅供娱乐~对各浏览器的兼容还算比较好~下面就来肢解一下相关代码：
1.首先是要复制的目标容器，在本博客中我借助的是codecolorer代码高亮插件的DIV，也可以根据自己的实际需要来使用别的，一样~只要给它一个ID,例如：
<div id=”copycode”>…这里是要复制的目标内容…</div>
2.接着要创建一个事件按钮，本文方法使用的是一隐藏flash来间接的实现兼容性复制，这面是该按钮代码：

<div id=”clipboard_content”>
<span class=”clipinner” id=”clipinner”>点此复制到剪贴板
<embed name=”clipboardswf” class=”clipboardswf” id=”clipboardswf” onmouseover=”setcopy_gettext()” devicefont=”false” src=”https://www.zh30.com/clipboard.swf” menu=”false” allowscriptaccess=”sameDomain” swliveconnect=”true” wmode=”transparent” type=”application/x-shockwave-flash” height=”20″ width=”100″></span>
</div>

好长啊好长啊….自己去看着精简吧….

3.然后，加上核心JS函数，如下：
<script type=”text/javascript”>
var clipboardswfdata;
var setcopy_gettext = function(){
clipboardswfdata = document.all.copycode.innerText;
window.document.clipboardswf.SetVariable(“str”, clipboardswfdata);
}
var floatwin = function(){
alert(“复制成功！” );
}
</script>
4.大工告成，赶紧试试吧！当然，您也可以给它加一个样式,如本博所用的：

<style type=”text/css”>
.clipinner {position:relative;}
.clipboardswf {position:absolute; left:0; top:0;}
</style>

好吧，一个小小的点击复制到剪贴板功能也不过如此吧？主要是要考虑到它的多浏览器兼容。

你还可以看看这篇文章：兼容各浏览器的复制到剪切板插件ZeroClipboard