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

第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. C# 文件操作【转】

    本文也收集了目前最为常用的C#经典操作文件的方法,具体内容如下:C#追加.拷贝.删除.移动文件.创建目录.递归删除文件夹及文件.指定文件夹下面的所有内容copy到目标文件夹下面.指定文件夹下面的所有内 ...

  2. 一键生成Spring MVC + MyBatis + maven项目

    首先创建一个新的maven项目,在src/main/java创建一个类Test 然后在Test复制以下代码: import java.io.*; import java.sql.Connection; ...

  3. 增加删除div

    <!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...

  4. 转：selenium自动化脚本错误总结

    https://blog.csdn.net/zxy987872674/article/details/53141118

  5. JS中for循环多个变量的判断原理

    看完下面两个例子的比较就明白了,其实就是逗号表达式,总是依据最后一个表达式的值. for(i=0, j=0; i<10, j<6; i++, j++){ k = i + j; consol ...

  6. Mysql 之show status数据详解

    状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...

  7. ARX自定义实体

    本文介绍了构造自定义实体的步骤.必须继承的函数和必须注意的事项 1.新建一个从AcDbEntity继承的类,如EntTest,必须添加的头文件: "stdarx.h"," ...

  8. CAD创建一个新的图形文件

    static void linea(void) { AcDbDatabase *pDb = new AcDbDatabase(true, false); AcGePoint3d pickPoint; ...

  9. 51nod 1002 数塔取数问题【dp】

    一个高度为N的由正整数组成的三角形,从上走到下,求经过的数字和的最大值. 每次只能走到下一层相邻的数上,例如从第3层的6向下走,只能走到第4层的2或9上. 5 8 4 3 6 9 7 2 9 5 例子 ...

  10. 【数值计算方法】二分法求根的C++简单实现

    给定精确度ξ,用二分法求函数f(x)零点近似值的步骤如下: 1 确定区间[a,b],验证f(a)·f(b)<0,给定精确度ξ. 2 求区间(a,b)的中点c. 3 计算f(c). (1) 若f( ...