前记：本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData)，但是很遗憾，这个函数仅仅支持IE和FF浏览器，所以基本用处不大。下边介绍的是一个第三方插件库(ZeroClipboard.js)。

ZeroClipboard.js在Git上的地址为：https://github.com/zeroclipboard/zeroclipboard

注意：此js库不支持兼容手机端(包括Android、IOS)，仅支持PC端浏览器。

第一步：将插件库引入到工程中。

把Git上的dist目录copy到自己的目录中(其实只需要ZeroClipboard.js和ZeroClipboard.swf就OK~)

脚本文件引入：

<script src="ZeroClipboard.js"></script>

第二步：初始化插件库。

var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {

  moviePath: "ZeroClipboard.swf"

} );

第三步：上代码。

 <!DOCTYPE html>

 <html>

 <head>

 <title>Zero Clipboard Test</title>

 <meta charset="utf-8">

 </head>

 <body>

 <!--

     说明：

     1.data-clipboard-target 输入要复制的对象的ID

 -->

 <button id="d_clip_button" class="my_clip_button" data-clipboard-target="fe_text"><b>复制到剪贴板</b></button>

 <br/>

 <textarea id="fe_text" cols="50" rows="3">输入需要复制的内容</textarea>

 </body>

 </html>

 <script type="text/javascript" src="ZeroClipboard.js"></script>

 <script type="text/javascript">

 //初始化复制对象

 var clip = new ZeroClipboard( document.getElementById("d_clip_button"), {

   moviePath: "ZeroClipboard.swf"

 } );

 //复制内容到剪贴板成功后的操作

 clip.on( 'complete', function(client, args) {

    alert("复制成功，复制内容为："+ args.text);

 } );

 </script>

以上示例代码注释中已经对Zero Clipboard的功能进行了介绍，需要了解更多的功能请到https://github.com/zeroclipboard/ZeroClipboard

注意：运行环境必须在服务器环境下，否则看不到效果！

《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. Missing Push Notification Entitlement 问题

    最近打包上传是遇到一个问题: 描述: Missing Push Notification Entitlement - Your app includes an API for Apple's Push ...

  2. MySQL：常见使用问题

    内容 1.Linux 上安装 MySQL 2.单机上安装多实例 3.不知root密码情况下,修改root密码 1.Linux 上安装MySQL 安装步骤: 1)解压 tar.gz文件 -linux-g ...

  3. mysql源码包手动安装、配置以及测试（亲测可行）

    笔记编者:小波/qq463431476博客首页:http://www.cnblogs.com/xiaobo-Linux/ 记下这篇mysql笔记,望日后有用! redhat6采用centos yum源 ...

  4. BZOJ1012: [JSOI2008]最大数maxnumber [线段树 | 单调栈+二分]

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 8748  Solved: 3835[Submi ...

  5. 如何使用RobotFramework编写好的测试用例

    如何使用Robot Framework编写优秀的测试用例 概述 命名 测试套件命名 测试用例命名 关键字命名 setup和teardown的命名 文档 测试套件文档 测试用例文档 用户关键字文档 测试 ...

  6. Lesson 22 A glass envolops

    Text My daughter, Jane, never dreamed of receiving a letter from a girl of her own age in Holland. L ...

  7. C++ std::priority_queue

    std::priority_queue template <class T, class Container = vector<T>, class Compare = less< ...

  8. 特殊的数据类型: bit、sql_variant、sysname

    在SQL Server中,特殊的数据类型主要有三个,分别是:bit.sql_variant 和 sysname 一,bit bit类型,只有三个有效值:0,1 和 null,字符串true或false ...

  9. 移动端HTML5音频与视频问题及解决方案

    最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频. 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者 ...

  10. ASP.NET MVC5+EF6+EasyUI 后台管理系统（54）-工作流设计-所有流程监控

    系列目录 先补充一个平面化登陆页面代码,自己更换喜欢的颜色背景 @using Apps.Common; @{ Layout = null; } <!DOCTYPE html> <ht ...