在網頁中實現復制到剪貼板功能,有兩種方法,
第1種方法:使用JavaScript自帶的方法,但是這種方法只能在IE下使用。
document.execCommand("Copy"); // 執行瀏覽器復制命令
alert("已復制好,可貼粘。");
或者
window.clipboardData.setData("Text","要復制的內容");
alert("已復制好,可貼粘。");
第2種方法:使用Jquery.ZeroClipboard組件,這種方法通過內嵌flash來實現的,可以兼容當前流行的各種瀏覽器。
我們今天主要講解第2種方法的實現(該方法在本地測試好像不行,必須發布到服務器上才可以)
首先引用JQuery和Jquery.ZeroClipboard,其中包括一個swf文件。
下面是網頁的源代碼:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery實現復制到剪貼板功能</title>
<script type="text/javascript" src="JavaScript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="JavaScript/ZeroClipboard.js"></script>
<script type="text/javascript">
$(function ()
{
//實現復制功能
$("#Copy").zclip({
path: 'JavaScript/ZeroClipboard.swf',
copy: $("#txtInput").val() + "\r\n" + "[轉載自:IT交流吧(http://www.itc8.com)]",
afterCopy: function ()
{
alert("復制成功,您可以粘貼發送給QQ上的好友或QQ群了!");
}
});
});
</script>
</head>
<body>
<input type="text" id="txtInput" />
<input type="button" id="Copy" value="復制" />
</body>
</html>
源碼下載