在网页中实现复制到剪贴板功能，有两种方法，

第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>

源码下载

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

  1. js/jQuery实现复制到剪贴板功能，兼容所有浏览器

    因为工作的原因,需要实现这样一个功能:点击按钮,复制文本内容. 百度了一下,大都语焉不详,最终找到了一篇很好的博文,有讲解,有实例,捣鼓了一会,最终实现了功能. 网址在这里http://www.cnb ...

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

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  3. 【原】js实现复制到剪贴板功能，兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  4. 黄聪：JS实现复制到剪贴板功能，兼容所有浏览器（转）

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  5. Zero Clipboard - 跨浏览器兼容的“复制到剪贴板”功能

    开发中经常会用到复制的功能,在 IE 下实现比较简单,但要想做到跨浏览器比较困难了. 本文将介绍一个跨浏览器的库类 Zero Clipboard ,它利用 Flash 进行复制,所以只要浏览器装有 F ...

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

    JS pc端和移动端实现复制到剪贴板功能实现 在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了, ...

  7. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  8. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

  9. 【转】js插件zClip实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

随机推荐

  1. SVN系列学习(二)-小乌龟的安装与配置

    1.TortoiseSVN的介绍 TortoiseSVN是Subversion版本控制系统的一个免费开源客户端,可以超越时间的管理文件和目录. 2.TortoiseSVN的安装 下载地址:http:/ ...

  2. html5——伸缩比例案例（携程）

    1.有图片的盒子,最好是父盒子设置伸缩属性,a标签设置伸缩比例1,img标签宽度100% 2.不要见到父盒子就设置伸缩属性,而是根据子盒子是否占据一行,若是子盒子占据一行,那么只要给子盒子设置伸缩比例 ...

  3. c指针之内存释放

    // 1.正常使用包含指针的结构体 // 2.正常使用元素类型为指针的vector #include<string.h> #include<stdio.h> #include& ...

  4. Cesium学习笔记（九）：导入3D模型（obj转gltf）

    在用cesium的过程中难免需要导入别人做好的3D模型,这时候就需要将这些模型转成gltf格式了 当然,官方也给了我们一个网页版的转换器,但是毕竟是网页版的,效率极其低下,文件还不能太大,所以我们就需 ...

  5. 玩转vim编辑器

    1.vim 编辑器可以自定义配置:包含初始化命令的文件叫vimrc(h vimrc),version ---查看版本号.系统-用户配置文件所在位置. 2. 可视模式: 操作一块区域代码: 按v    ...

  6. 00.pip安装包

    pip安装更换镜像源 pip install 包名 -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com pip导出和导入 ...

  7. hdu 5178 pairs

    pairs 问题描述 John 在X轴上拥有nn个点,他们的坐标分别为$(x[i],0),(i=0,1,2,…,n-1)$. 他想知道有多少对< a,b ><a,b>满足|x[ ...

  8. Java 下实现Cache

    最近在做Spring的项目,想做一个缓存,访问数据库,定期来做数据更新 要实现两个功能 可以通过http请求来立刻刷新缓存 缓存可以通过自己配置的时间间隔来定期刷新 通过Controller来做 因为 ...

  9. 关于PyQt5，在pycharm上的安装步骤及使用技巧

    前序 之前学习了一款GUI图形界面设计的Tkinter库,但是经大佬的介绍,PyQT5全宇宙最强,一脸的苦笑 毫不犹豫的选择转战PyQT5,在学习之前需要先安装一些必须程序,在一番查阅后,发现PyQt ...

  10. Beetl学习总结（3）——高级功能

    3.1. 配置GroupTemplate Beetl建议通过配置文件配置配置GroupTemplate,主要考虑到未来可能IDE插件会支持Beetl模板,模板的属性,和函数等如果能通过配置文件获取,将 ...