JQuery實現復制到剪貼板功能


 

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

 源碼下載


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM