想要实现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