JQuery實現複製到剪貼板功能

時間 2019-11-11

原文原文鏈接

在網頁中實現複製到剪貼板功能，有兩種方法，
第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>

源碼下載javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。