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