html 复制标签内文本的按钮的 js 实现【学习过程】【浏览器兼容】

想要实现div中的文字内容一键复制到剪切板中，一开始在网上search到两种方案：

方案1：

<script type="text/javascript">
function jsCopy(s){
var obj=document.getElementById(s);
obj.select(); //选择对象
document.execCommand("Copy"); //执行浏览器复制命令
alert("已复制，可贴粘。");
}
</script>

此方法仅适用于text属性的如 等对象，对于div则没用。也试了下用 s.firstChild 来找文本对象，无法找到，提示undefined。而改成段落对象后，则和div一样，可以alert出文本，但无法选中。

方案2：

<script type="text/javascript">
function jsCopy(s){
var obj=document.getElementById(s);//对象是content :
window.clipboardData.setData("Text", obj.innerHTML);
alert("已复制，可贴粘。");
}
</script>

调用部分：

<div class="CollapsiblePanelContent" id='best_ans'>
$if ansrs.best.text!=None:
$ansrs.best.text
$else:
<br/>
</div>
<a href="#" onclick="jsCopy('best_ans');return false;">
<!-- img class = "middle" src="/static/img/copy.png" width="18" height="18" alt="copy"/ -->
copy
</a>
<textarea name = 'b' id = 'b'> best ooo </textarea>

网上都说这个方法是兼容IE,chrome,火狐的，然而我用的chrom测试出来都不对。一直以为是 div 内容提取的问题，后来注释掉该句之后用 alert(obj.textContent); 显示可以成功，说明。后来针对性去查才发现如今chrome和火狐都因为安全问题而不兼容window.clipboardData.setData()，即不兼容复制操作。

那么问题来了，真的没有办法有效一键复制我们想复制的内容了吗？

不是的！让我们有请 ZeroClipboard~~

详细见参考资料~

等试明白了再更新

参考资料：

http://www.jb51.net/article/39844.htm

http://www.cnblogs.com/PeunZhang/p/3324727.html