zoukankan      html  css  js  c++  java
  • clipboard

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过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

  • 相关阅读:
    用Maven插件生成Mybatis代码
    年薪50万的大数据分析师养成记
    利用 index、explain和profile优化mysql数据库查询小结
    perl MQSeries::Queue sync方法
    新零售不简单,当初马云自己都没解释清楚!
    新零售不简单,当初马云自己都没解释清楚!
    elasticsearch 默认不支持检索hadoop
    以不能久驻世上的心态处理日常事务——北漂18年(89)
    数据化管理在餐饮业中的应用
    解决Linux出现"Device eth0 does not seem to be present"问题
  • 原文地址:https://www.cnblogs.com/dshvv/p/6979398.html
Copyright © 2011-2022 走看看