前记：本来原生的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. FineReport:任意时刻只允许在一个客户端登陆账号的插件

    在使用FineReport报表系统中,处于账户安全考虑,有些企业希望同一账号在任意时刻智能在统一客户端登录.那么当A用户在C1客户端登陆后,该账号又在另外一个C2客户端登陆,服务器如何取判断呢? 开发 ...

  2. 最牛的打字效果JS插件 typing.js

    最新在做公司的一个项目,需要实现一个敲打代码的动画效果,粗意味比较简单,果断自己直接开写,写着写着发现是一个坑.需要支持语法高亮,并不能直接简单的用setTimeout来动态附件innerHTML.苦 ...

  3. 小丁带你走进git的世界三-撤销修改

    一.撤销指令 git checkout还原工作区的功能 git reset  还原暂存区的功能 git clean  还没有被添加进暂存区的文件也就是git还没有跟踪的文件可以使用这个命令清除他们 g ...

  4. Flux 普及读本

    话说当时做 APP 时,三月不知肉味,再次将眼光投放前端,有种天上一天,地下一年的感觉. Flux 是一种思想 了解的最好方式当然是看Flux官方文档了.React 中文站点也能找到对应的翻译版本,但 ...

  5. 不要听吹牛逼什么前端MVVM框架就是好，其实都是一帮没学好分层设计的搞出来的，让你彻底看清前端MVVM的本质

    最近前端圈子里面,发现大家都在热炒概念,什么knockout,angularJs,都被捧成神了,鄙人不才,最近心情也不好,特地写这篇文章来找骂 写代码的码农都知道,Java社区虽然不是一个提出分层思想 ...

  6. Oracle数据库操作知道

    SELECT TGTID,PHONENUM,REGISTERDATE ,to_date(REGISTERDATE,'YYYY-MM-DD HH24:MI:SS') AS T FROM WTRESSEN ...

  7. Tcl internal variables

    Tcl internal variables eryar@163.com 在Tcl中内置了一些变量,并赋予了一定的功能.内置变量列表如下: 变量名称 功能描述 argc 指命令行参数的个数. argv ...

  8. System.arraycopy()和Arrays.copyOf()的区别

    先看看System.arraycopy()的声明: public static native void arraycopy(Object src,int srcPos, Object dest, in ...

  9. [SQL] SQL 基础知识梳理（四） - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  10. C#字符串的倒序输出

    介绍 在本文中,我将演示如何将字符串的单词倒序输出.在这里我不是要将“John” 这样的字符串倒序为成“nhoJ”,.这是不一样的,因为它完全倒序了整个字符串.而以下代码将教你如何将“你 好 我是 缇 ...