我们在网页上放置一个复制按钮，主要用来方便用户复制链接之类的复杂文本，以往的做法是，通过JS依靠Flash，甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的，不需要flash，不依赖任何其他js库的非常小的插件，它叫clipboard.js。
clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+

最近在做一个的智能客服Web端浏览器应用，其中有一项需求是客户在获取系统返回的答案后点击“复制答案”按钮将答案复制到系统剪切板。本以为这是一个小case,但是发现如果要对各种主流浏览器都有良好的兼容性并不简单。原因在于出于安全原因，大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有，也默认被禁用)。
上网搜索了一下，现有的方案大致有两种：
一：使用原生javascript中window.clipboardData实现复制到剪贴板功能；
二：使用Zero Clipboard库；
方案一仅仅支持ie浏览器，在firefox,chrome浏览器上则不起作用。
方案二则是现有绝大多数网站（包括github等）所采取的方案，ZeroClipboard是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了,ZeroClipboard 中的 "Zero" 指的就是"不可见，零干扰"。
在尝试了之后发现现有的方案都不能满足需求。那么，对于复制到剪切板这种简单的操作有没有一种实现简单，兼容性良好的解决方案呢？有的！那就是github上的开源项目clipboard.js

使用简介

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        title{display: block; background-color:#DADADA }

        #bar{border:red solid 1px; width: 400px}

        .demoGroup{margin-bottom:30px }

    </style>

</head>

<body>

    <div class="demoGroup">

        <title>复制文本</title>

        <div id="bar"> sdfsfewtewtdfg545we3r1we23</div>

        <button class="btn1"  data-clipboard-action="copy" data-clipboard-target="#bar">一键复制</button>

    </div>

    <div class="demoGroup">

        <title>剪切文本（剪切操作仅适用于text和textarea）</title>

        <input type="text" id="ipt" value="测试数据">

        <button class="btn2"  data-clipboard-action="cut" data-clipboard-target="#ipt">一键剪切</button>

    </div>

    <script src="js/jquery-3.2.1.min.js"></script>

    <script src="js/clipboard.min.js"></script>

    <script>

        function doClipboard(obj){

            var clipboard = new Clipboard(obj);

            clipboard.on('success', function(e) {

                console.warn("复制/剪切成功!")

                console.info(e);

            });

            clipboard.on('error', function(e) {

                console.error("复制/剪切失败!")

                console.info(e);

            });

        }

        //复制

        doClipboard('.btn1')

        doClipboard('.btn2')

    </script>

</body>

</html>

效果预览

插件官网下载地址：https://github.com/zenorocha/clipboard.js
方便大家我提供的：http://files.cnblogs.com/files/flyings/clipboard.min.js

clipboard的更多相关文章

  1. 解决autolt上传图片报错cannot open system clipboard

    今天调试代码,发现本地可以上传图片,但是集成环境无法上传报错cannot open system clipboard: 百度查了下,我的系统没有剪切板程序,才报错. 验证方法如下: win+r,输入c ...

  2. win10 剪贴板 拒绝访问 Cannot open clipboard

    win10 Cannot open clipboard:拒绝访问. 在RAD IDE代码编辑器中,双击选中的文本,会自动复制到剪贴板里,导致的问题是 从 A处复制文本 到B处双击选中,粘贴的时候,是B ...

  3. Clipboard.js实现复制内容到剪切板

    <script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1. ...

  4. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

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

    zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...

  6. vim - Putting the current file on the Windows clipboard

    http://vim.wikia.com/wiki/VimTip432 command! Copyfile let @*=substitute(expand("%:p"), '/' ...

  7. 关于.net 中Clipboard.GetDataObject() 之后读出数据读出的数据都是相同的解决方法

    模拟键盘sendkey("^c") 多次复制之后 当使用Clipboard.GetDataObject() 读出数据都是一个值 经过多次尝试 提供一个解决方案 IDataObjec ...

  8. node-webkit教程(8)Platform Service之Clipboard

    node-webkit教程(8)Platform Service之Clipboard 文/玄魂 目录 node-webkit教程(8)Platform Service之Clipboard 前言 8.1 ...

  9. js实现剪切、复制、粘贴——clipBoard.js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  10. Easy Multiple Copy to Clipboard by ZeroClipboard

    要实现在多个复制按钮复制的功能(具体代码在附件中,路径修改一下就行了): <%@ page language="java" import="java.util.*& ...

随机推荐

  1. 说明Oracle数据库逻辑备份和物理备份的方式。

    说明Oracle数据库逻辑备份和物理备份的方式. 解答:Oracle备份包括逻辑备份和物理备份. 1)．逻辑备份 数据库的逻辑备份包含读一个数据库记录集和将记录集写入文件. a.输出(Export)输 ...

  2. Struts1中actionform和action属于MVC哪一层，为什么？

    Struts1中actionform和action属于MVC哪一层,为什么? 解答:actionform和action属于MVC的Model层,Action用来处理业务逻辑,actionform保存用 ...

  3. Apollo 刨析：简介

      Apollo是配置在IIS服务器上的一个Web站点,它使用了.NET4.0和ASP.Net的技术. 代码是C#编写的.是基于ASP.NET MVC3的Web开发框架上编写的一个应用. 它使用到了N ...

  4. 【SR】MAP

    MAP:最大后验概率(Maximum a posteriori) 估计方法根据经验数据获得对难以观察的量的点估计.它与最大似然估计中的 Fisher方法有密切关系, 但是它使用了一个增大的优化目标,这 ...

  5. 第三篇：POSIX标准中的 “ 限制 ”

    前言 在POSIX标准中,定义了许多限制.这些限制大约分为五类,不同类型的限制获取的方式不一样. 限制值分类 1. 不变的最小值 这类型的限制值是静态的,固定的. 2. 不变值 同上 3. 运行时可以 ...

  6. Delphi MessageBox

    MessageBox对话框是比较常用的一个信息对话框,其不仅能够定义显示的信息内容.信息提示图标,而且可以定义按钮组合及对话框的标题,是一个功能齐全的信息对话框信息提示图标,而且可以定义按钮组合及对话 ...

  7. 【BZOJ4108】[Wf2015]Catering 有上下界费用流

    [BZOJ4108][Wf2015]Catering Description 有一家装备出租公司收到了按照时间顺序排列的n个请求. 这家公司有k个搬运工.每个搬运工可以搬着一套装备按时间顺序去满足一些 ...

  8. Angular入门（三） 引入boostrap4

    1.cnpm install ngx-bootstrap bootstrap --save ※可能缺少jquery  cnpm i jquery 2.  打开 angular-cli.json (项目 ...

  9. 云计算之路：2009年Xen一个补丁背后那不为人知的故事

    仔细阅读了http://www.cnblogs.com/cmt/p/3729386.html这篇关于xen的博文,这篇博文写的挺赞的,分析的也很细致,涉及到4年前的一个patch的故事.在讲这个故事之 ...

  10. StackExchange.Redis性能调优

    大家经常出现同步调用Redis超时的问题,但改成异步之后发现错误非常少了,但却可能通过前后记日志之类的发现Redis命令非常慢. PS: 以后代码都在Windows bash中运行,StackExch ...