【摘要】
ClipboardData.setData方法可以輕易設(shè)置剪貼板的值，利用該方法可以將頁面指定內(nèi)容輕易復(fù)制到剪貼板。
【正文】
一 ClipboardData方法介紹
ClipboardData方法能夠?qū)羟邪暹M行多種操作，這里只用到復(fù)制到剪貼板的ClipboardData.setData對象，格式如下：
ClipboardData.setData(“復(fù)制內(nèi)容的格式”,復(fù)制內(nèi)容);
二 實現(xiàn)過程
下圖為Html頁面中的一部分，我們要實現(xiàn)的功能是點擊操作一欄中的“復(fù)制網(wǎng)址”后，
將同一行的“填寫網(wǎng)址”中的url復(fù)制到剪貼板上。url的值用angularJS進行了綁定。
頁面代碼如下：
<div>
<table class="table table-striped">
<thead>
<tr>
<th>填寫網(wǎng)址</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>復(fù)制網(wǎng)址</a>-->
<a href="" ng-click="copy(item.Url)" >復(fù)制網(wǎng)址</a>
<a>信息導(dǎo)入</a>
<a href="" ng-click="open(item.Id)">編輯</a>
<a ng-click="Delete(item.Id)">刪除</a>
</td>
</tr>
</table>
</div>
復(fù)制按鈕與方法copy()綁定。JS中代碼：
$scope.copy = function (Url) {
window.clipboardData.setData("text", Url);
alert('已復(fù)制到剪貼板：'+Url);
}
在頁面上點擊第一個“復(fù)制網(wǎng)址”，效果：
點擊第二個“復(fù)制網(wǎng)址”：
確認已分別復(fù)制到剪貼板。
三 后記
復(fù)制到剪貼板這一功能在網(wǎng)頁制作中經(jīng)常會用到，zeroclipboard是比較常用的一種方法，但使用方法略為復(fù)雜，版本的不同使用方式也不一樣。相比之下ClipboardData用法簡單，但是只能在IE中使用，chrome等瀏覽器貌似較高版本也能使用，這里并沒有作測試。
