JQuery实现复制到剪贴板功能

时间：2024-02-22 16:46:15

 

在网页中实现复制到剪贴板功能，有两种方法，
第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>

 源码下载

相关文章