js復制內容到剪貼板

    我們web上的復制，有時候盡管可以用鼠標選中，然后復制，但是某些時候，文字不方便選中。因此，我們自定義一個復制按鈕，然后通過點擊它，把想要的內容復制到剪貼板上。我歸納總結了幾種方法：

    1、ZeroClipboard.js

     以前用過這個js，它需要配合swf格式的flash發揮作用，可謂曲線救國，而且不太好用。它的瀏覽器兼容性ok，我摘了官網上的原話：

     The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface.

     The "Zero" signifies that the library is invisible and the user interface is left entirely up to you.

    2、window.clipboardData

    這個對象，只有在IE下有值，其它瀏覽器下為null或者undefined。我嘗試了下 clipboardData.setData("Text", txt);此方法可用，參數Text表示文本格式，txt是要復制的內容。此方法局限性有二，第一是IE瀏覽器的限制，第二是對於復雜結構的web元素，如果我們自己獲取到元素的內容，可能失去了原本的樣式。比如，web上的顯示如下：


    wbq

    school

    today

我們通過jquery或者js操作，獲取到文本的內容是這樣的：wbq school today，然后我們可能還得處理。

  3、execCommand

    execCommand方法是執行一個對當前文檔，當前選擇或者給出范圍的命令。處理Html數據時常用。比如字體加粗、字號等等。document.execCommand在IE和chrome瀏覽器下都有定義。但是，document.body.createTextRange僅僅定義在IE下，它用來創建一個選中范圍。還有一個這樣的方法 document.createRange，它也是在兩大瀏覽器上都有定義。具體怎么用，有興趣的可以查詢資料。

 4、clipboard.js

  在chrome下用的很happy，在Ie 11下，測試通不過，直接沮喪了。

總之，web上的兼容性是一個問題，我綜合各種方法，應用到我們程序中，詳見代碼：

@using ResourceShare.Web.Helpers;
<div class="row">
    <div class="form-horizontal">
        <div style="padding-left:35px;">
            <h3>數據庫列表</h3>
        </div>
        <div style="padding: 0 15px 0 20px; margin-top:8px;">
            <ul class="addcorel" id="dblist">
                @foreach (var item in Model)
                {
                    <li style=" float:left"><label>@item</label></li>
                }
            </ul>
            <div style="clear:both;"></div>
        </div>
    </div>
</div>
<script src="~/Content/js/lib/clipboard.js"></script>
<script type="text/javascript">

    var button = "<button type='button' class='btn btn-default' id='copy' data-clipboard-action='copy'  data-clipboard-target='#dblist' onclick='copyData()'>復制</button>";

    if ($(".modal-footer #copy").length == 0) {
        $(button).insertBefore(".modal-footer button");
    }

    var clipboard;

    function copyData() {
       
        if (window.clipboardData) {
          
            var obj = $("#dblist");
            var rng = document.body.createTextRange();
            rng.moveToElementText(obj[0]);
            rng.scrollIntoView();
            rng.select();
            rng.execCommand("Copy");
            rng.collapse(false);
            showTipMessage("復制成功");
        }
        else {
            if (clipboard == null) {
                clipboard = new Clipboard('#copy');
                clipboard.on('success', function (e) {
                    showTipMessage("復制成功");
                    e.clearSelection();
                });

                clipboard.on('error', function (e) {
                    showTipMessage("復制出錯" + e);
                });
            }
        }
    }
</script>

我自定義了一個按鈕，給它加了一個點擊處理函數copyData，通過瀏覽器檢測，IE下，采用了方法3，chrome下采用方法4。我要復制的對象是 id="dblist"的ul下的li里的文本，如下圖所示：

 粘貼到excel中，留作備用。