【摘要】

ClipboardData.setData方法可以輕易設置剪貼板的值，利用該方法可以將頁面指定內容輕易復制到剪貼板。

【正文】

一   ClipboardData方法介紹

ClipboardData方法能夠對剪切板進行多種操作，這里只用到復制到剪貼板的ClipboardData.setData對象，格式如下：

 

ClipboardData.setData(“復制內容的格式”,復制內容);

 

二   實現(xiàn)過程

下圖為Html頁面中的一部分，我們要實現(xiàn)的功能是點擊操作一欄中的“復制網址”后，

將同一行的“填寫網址”中的url復制到剪貼板上。url的值用angularJS進行了綁定。

 

 

頁面代碼如下：

 

<div>

        <table class="table table-striped">

            <thead>

                <tr>

                    <th>填寫網址</th>

                    <th>填寫狀態(tài)</th>

                    <th style="min-width:20%;">操作</th>

                </tr>

 

            </thead>

 

            <tr ng-repeat="item in view.NewEmployeeList track by $index">

                <td>{{item.Url}}</td>

                <td>{{item.State}}</td>

                <td>

                    <!--<a>復制網址</a>-->

                    <a href="" ng-click="copy(item.Url)" >復制網址</a>

                    <a>信息導入</a>

                    <a href="" ng-click="open(item.Id)">編輯</a>

                    <a ng-click="Delete(item.Id)">刪除</a>

                </td>

 

            </tr>

 

        </table>

 </div>

 

復制按鈕與方法copy()綁定。JS中代碼：

 

    $scope.copy = function (Url) {

        window.clipboardData.setData("text", Url);

        alert('已復制到剪貼板：'+Url);

    }

 

在頁面上點擊第一個“復制網址”，效果：

 

點擊第二個“復制網址”：

 

確認已分別復制到剪貼板。

 

三   后記

復制到剪貼板這一功能在網頁制作中經常會用到，zeroclipboard是比較常用的一種方法，但使用方法略為復雜，版本的不同使用方式也不一樣。相比之下ClipboardData用法簡單，但是只能在IE中使用，chrome等瀏覽器貌似較高版本也能使用，這里并沒有作測試。