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>

源码下载

时间: 2024-10-02 21:11:55

JQuery实现复制到剪贴板功能的相关文章

jQuery ZeroClipboard 复制到剪贴板功能,兼容所有浏览器

<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/jav

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

js插件zClip实现复制到剪贴板功能

之前在一个项目中用过插件,但是最近又要做,发现,出现问题了,根据以往记忆做好,检查了所有问题,还是不出现,元素是绑定了zclip_type这个事件,就是弹出不显示,想了下,查看html结构元素一看,问题发现,覆盖的层定位有问题.相对body定位了,没有相对td定位. 一,准备工作. 准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址

【转】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

JS pc端和移动端共同实现复制到剪贴板功能实现

JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯JS方法复制文本到剪切板. 插件名是Clipboard.js,该插件不依赖 Flash,而是依赖于最新HTML5推出 Selection API 和 execCommand API. Github:https://github.com/zenorocha/

【javascript】复制到剪贴板功能(支持目前各种浏览器)

本demo支持各种浏览器复制,亲测可用(IE8,IE9,IE10,火狐,谷歌). 本demo中使用了ZeroClipboard(下载地址:https://github.com/zeroclipboard/zeroclipboard). 本demo 必须在服务器环境下,浏览器直接打开无效. 本demo 需要引入3个文件:jquery.min.js.ZeroClipboard.min.js和ZeroClipboard.swf. <!DOCTYPE html> <html> <he

js实现复制到剪贴板功能,兼容所有浏览器

http://www.cnblogs.com/PeunZhang/p/3324727.html https://github.com/zeroclipboard/ZeroClipboard 复制链接到剪贴板,为什么要在服务器上运行? 在一个透明的flash(对用户来说是不可见的)上覆盖一个dom元素比如button或div,当点击这个dom时,实际点击的是flash,从而访问flash的剪贴板.

jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

clipboard复制剪贴板功能,以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined

zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面介绍如下 下面这个js插件能实现<!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <script s