【摘要】

ClipboardData.setData方法可以轻易设置剪贴板的值，利用该方法可以将页面指定内容轻易复制到剪贴板。

【正文】

ClipboardData方法能够对剪切板进行多种操作，这里只用到复制到剪贴板的ClipboardData.setData对象，格式如下：

ClipboardData.setData(“复制内容的格式”,复制内容);

下图为Html页面中的一部分，我们要实现的功能是点击操作一栏中的“复制网址”后，

将同一行的“填写网址”中的url复制到剪贴板上。url的值用angularJS进行了绑定。

页面代码如下：

div

table class="table table-striped"

thead

t

th>填写网址

th>填写状态

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

t

thead

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

td>{{item.Url}}

td>{{item.State}}

td

!--复制网址--

a href="" ng-click="copy(item.Url)" >复制网址

a>信息导入

a href="" ng-click="open(item.Id)">编辑

a ng-click="Delete(item.Id)">删除

td

t

table

div

复制按钮与方法copy()绑定。JS中代码：

$scope.copy = function (Url) {

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

alert('已复制到剪贴板：'+Url);

}

在页面上点击第一个“复制网址”，效果：

点击第二个“复制网址”：

确认已分别复制到剪贴板。

复制到剪贴板这一功能在网页制作中经常会用到，zeroclipboard是比较常用的一种方法，但使用方法略为复杂，版本的不同使用方式也不一样。相比之下ClipboardData用法简单，但是只能在IE中使用，chrome等浏览器貌似较高版本也能使用，这里并没有作测试。