用JavaScript将信息拷贝到剪贴板的方法

在很多视频网站或提供了网址分享功能的网站上，你会发现当你点击分享组件后网址或分享代码会自动的粘贴到你的系统剪贴板里。这种能将网页内容自动粘贴到剪贴板的功能会给用户带来很大的方便。不幸的是，Flash 10毁掉了大部分所有的完成这个任务的方法。而幸运的是，还有一个工具叫做ZeroClipboard。ZeroClipboard使用了一个替换的Flash，并和JavaScript交互，能让你把任意内容通过JavaScript拷贝到系统剪贴板板里。

HTML代码

<script type="text/javascript" src="ZeroClipboard.js"></script>
<textarea name="box-content" id="box-content" rows="5" cols="70">
	这里是歪脖骇客(WebHek)，请关注我们的微博：@歪脖骇客
</textarea>
<br /><br />
<p>
<input type="button" id="copy"  data-clipboard-target="box-content" name="copy" value="拷贝到剪贴板" />
</p>

上面的HTML代码里有一个文本框，ID是”box-content”，还有一个按钮，ID是”copy”。下面在使用ZeroClipboard程序包时将会用到这两个ID。

ZeroClipboard JavaScript

//设置路径
ZeroClipboard.config( { moviePath: 'zeroclipboard-1.x-master/ZeroClipboard.swf' } );
//create client
var client=new ZeroClipboard($("#copy"));
//event

client.on( "load", function(client) {
              // alert( "movie is loaded" );

              client.on( "complete", function(client, args) {
                // `this` is the element that was clicked
                
                alert("粘贴进剪贴板的信息是:\" " + args.text  +);
              } );
            } );

上面的代码中我们做的几件事情是：

• 设置SWF文件的路径。
• 创建一个ZeroClipboard的”client”对象:一个client就是这个页面上的一个剪贴板对象实例。
• ZeroClipboard会自动添加监听器，点击按钮时，文本框里的文字将被拷贝到剪贴板里。
• 当拷贝事件完成后，你还可以添加一个回调函数，执行后续动作，比如提示已拷贝成功。

在拷贝内容里加入网页相关信息

我发现现在有一种趋势，当我在其它网站拷贝网页内容时，发现拷贝的内容里多出了一些这个网站的署名信息，比如网页标题、链接地址或一段关于这篇文章的声明内容。下面就说一下如何实现它。

JavaScript脚本

你需要使用ZeroClipboard插件：

//set path
ZeroClipboard.config( { moviePath: 'zeroclipboard-1.x-master/ZeroClipboard.swf' } );
//create client
var client=new ZeroClipboard($("#copy"));
//event
client.addEventListener('mousedown',function() {
	client.setText(document.getElementById('box-content').value + ".\n\n阅读 " + window.title + "，来自" + window.location + "，这里有更多有趣内容！");
});

使用Javascript读取页面的title和网址，将它们连接到拷贝的内容信息的后面。

很简单实用。ZeroClipboard是一个非常不错的工具，让你在任何网站上都能实现JavaScript程序控制将信息拷贝到剪贴板。