精华内容
下载资源
问答
  • Clipboard复制使用

    千次阅读 2018-02-03 16:24:11
    clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中  clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE...

    1. 概述

    clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 
    clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 
    官网

    2. 使用方式

    2.1 引入js文件

    以下所有的代码都使用到以下js文件

    <script src="/web2/component/clipboard/1.6.1/clipboard.js"></script> 
     
    • 1

    clipboard复印内容的方式有 
    - 从target复印目标内容 
    - 通过function 要复印的内容 
    - 通过属性返回复印的内容

    2.2 从target复印目标内容

    可以从input、textare、div中通过copy/cut获取内容目标内容,其HTML的代码如下

    • input 
      data-clipboard-target指向复印节点,这里指input的目标id 
      data-clipboard-action这里使用copy,同时也可以使用cut,则点击按钮后,内容里的值被剪切。如果没有指定,则默认值是copy。cut只能在input和textare中起作用
    <input id="foo" type="text" value="hello">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
     
    • 1
    • 2
    • textare 
      和上面的主要区别只是input和textare不同
    <textarea id="bar">hello</textarea> 
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
     
    • 1
    • 2
    • div 
      和上面的主要区别只是input和div不同
    <div>hello_div</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
    
     
    • 1
    • 2
    • 3

    以上的插件的初始化JS代码都是相同:

       <script>
           // button的class的值
            var clipboard = new Clipboard('.btn');
            clipboard.on('success', function(e) {
                console.log(e);
            });
    
            clipboard.on('error', function(e) {
                console.log(e);
            });
        </script>
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    2.3 通过function 要复印的内容

    通过target,text的function复印内容

    • 通过target的function复印内容 
      通过target指定要复印的节点,这里返回舒值是‘hello’
        <button class="btn">Copy_target</button>
        <div>hello</div>
    
        <script>
        var clipboard = new Clipboard('.btn', {
        // 通过target指定要复印的节点
            target: function() {
                       return document.querySelector('div');
                  }
        });
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 通过text的function复印内容 
      text的function指定的复印内容,这里返回‘to be or not to be’
     <button class="btn">Copy</button>
     <script>
        var clipboard = new Clipboard('.btn', {
        // 点击copy按钮,直接通过text直接返回复印的内容
            text: function() {
                return 'to be or not to be';
            }
        });
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    2.4 通过属性返回复印的内容

    通过data-clipboard-text属性返回复印的内容

    • 单节点 
      通过id指定节点对象,并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容
    // 通过id获取复制data-clipboard-text的内容 
    <div id="btn" data-clipboard-text="1">
            <span>Copy</span>
    </div>
    
    <script>
        var btn = document.getElementById('btn');
        var clipboard = new Clipboard(btn);
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 多节点 
      通过button返回所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
    //  多节点获取button的data-clipboard-text值
     <button data-clipboard-text="1">Copy</button>
        <button data-clipboard-text="2">Copy</button>
        <button data-clipboard-text="3">Copy</button>
    <script>
        var btns = document.querySelectorAll('button');
        var clipboard = new Clipboard(btns);
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    
     
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 多节点 
      通过class获取所有button按钮,并做为参数传送给Clipboard。每个按钮被点击时,返回值的内容是其对应的data-clipboard-text的内容,分别是1,2,3
    //   通过class注册多个button,获取data-clipboard-text的值
    <button class="btn" data-clipboard-text="1">Copy</button>
        <button class="btn" data-clipboard-text="2">Copy</button>
        <button class="btn" data-clipboard-text="3">Copy</button>
     <script>
        var clipboard = new Clipboard('.btn');
    
        clipboard.on('success', function(e) {
            console.log(e);
        });
    
        clipboard.on('error', function(e) {
            console.log(e);
        });
        </script>
    展开全文
  • 描述一下之前做过的一个需求,一个订单详情页面内同时存在多个复制按钮,点击复制按钮时,分别拷贝对应的文本,并触发相应事件。看了一下官网的描述,官方推荐的写法如下: Copy to clipboard 这样的写法用于页面内仅...

    描述一下之前做过的一个需求,一个订单详情页面内同时存在多个复制按钮,点击复制按钮时,分别拷贝对应的文本,并触发相应事件。

    看了一下官网的描述,官方推荐的写法如下:

    Copy to clipboard

    这样的写法用于页面内仅有一个复制button时是没有问题的,但是我当前遇到的需求是,页面内存在N个复制button,点击时就出现了重复复制上一个传入文本的问题。在翻了很多相关使用clipboard.js的文章后,发现还是没有找到好的解决方案。自己瞎捣鼓了一套解决方案,附上代码,大家如有遇到类似的需求,也可以尝试从这个方向来解决问题。//template部分,省略多个类似button定义

    //couponItem为外层传入的券码对象,对象内仅包含券码和一个状态值

    class="button--copy tc btn"

    :id="'product-'+couponItem.coupon"

    @click="copyText(`#product-${couponItem.coupon}`, true)"

    :data-clipboard-text="couponItem.coupon"

    >复制

    import Clipboard from 'clipboard' //需要提前npm该插件

    //methods部分

    copyText (copyId, status) {

    let clipboard = new Clipboard(copyId, {

    text: function (trigger) {

    return trigger.getAttribute('data-clipboard-text')

    }

    })

    clipboard.on('success', e => {

    if (status) {

    this.doSomething()// 执行相关操作

    console.log('券码复制成功')

    } else {

    console.log('复制成功')

    }

    clipboard.destroy()

    })

    clipboard.on('error', e => {

    clipboard.destroy()

    })

    }

    // 调用方法完必须销毁clipboard,以免后续调用时复制的值错乱

    button内的传入id为自定义产生的一个唯一值,可根据实际情况自定义传入参数。(但是必须保证其唯一性)

    大家如果有更简单的解决方案也欢迎大家留言,互相学习下。For love and peace.

    我的邮箱747379968@qq.com,欢迎指教。:)

    展开全文
  • 1. 什么是clipboard.js? 在clipboard.js官网(网址:https://clipboardjs.com/)上,它是这么介绍的: A modern approach to copy text to clipboard No Flash. No frameworks. Just 3kb gzipped 简而言之,就是...

    我的微信公众号知行校园汇,点击查看,欢迎关注


    我的其他平台(点击蓝字可访问):

    GitHub  |  Gitee  |  哔哩哔哩  |  语雀  |  简书  |  微信小程序  |  知行达摩院

    1. 什么是clipboard.js?

    在clipboard.js官网(网址:https://clipboardjs.com/)上,它是这么介绍的:

    A modern approach to copy text to clipboard
    No Flash. No frameworks. Just 3kb gzipped

    简而言之,就是现代化的文本复制工具,不依赖Flash,不不赖框架,压缩后仅3kb大小

    总之,使用该脚本工具,可以轻松实现文本复制。

    2. 哪里下载?

    在官网就提供了下载链接。

    可以使用npm工具安装:

    npm install clipboard --save
    

    或者直接下载压缩包,链接:https://github.com/zenorocha/clipboard.js/archive/master.zip

    3. 使用

    使用的时候,只需要使用script命令,引入该文件即可:

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

    4. 使用方法概述

    4.1 基本的使用方法

    首先给input,或者textarea等,甚至于div元素,设置id,以及value值或者默认值;

    然后设置点击按钮input或者button,通过 data-clipboard-actiondata-clipboard-target 属性,绑定事件;

    最后在js中实例化clipboard。

    如下示例,将给出完整的基本示例,详细过程请见注释:

    <!-- 该代码可直接创建HTML文件运行 -->
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <title>target-input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <!-- 1. 定义一些标记 -->
        <!-- 2. 设置按钮 -->
          
        <!-- 示例1:复制input元素的value值 -->  
        <input id="foo" type="text" value="这是input元素的value值" />
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button> 
         
        <!-- 示例2:剪切textarea元素的值 -->
        <textarea id="bar">这里的文本可被复制或者剪切</textarea>
        <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button>
          
        <!-- 示例3:复制div元素的值 -->
        <div>这是div元素里的文字</div>
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button>
    
        <!-- 示例4:复制button自己设置的值 -->
        <button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button>
          
        <!-- 3. 引入库文件 -->
        <!--  <script src="../dist/clipboard.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    
        <script>
          //4. 实例化clipboard
          var clipboard = new ClipboardJS('.btn');
    
          //5. 复制成功的响应事件【按F12控制台可见】
          clipboard.on('success', function (e) {
            console.log(e);
            //打印动作信息(copy或者cut)
            console.info('Action:', e.action);
            //打印复制的文本
            console.info('Text:', e.text);
            //打印trigger
            console.info('Trigger:', e.trigger);
          });
    
          //6. 复制失败的响应事件
          clipboard.on('error', function (e) {
            console.log(e);          
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
          });
        </script>
      </body>
    </html>
    

    当然,在上面这个代码的第2步,data-clipboard-action 除了可以为 copy ,还可以为 cut ,但是只能对<input> 或者 <textarea> 元素生效。

    4.2 高级用法

    可以通过返回元素的方式,实现动态设置复制内容:

    <!-- 该代码可直接创建HTML文件运行 -->
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <title>function-target</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <!-- 1. 基本信息定义 -->
        <button class="btn">点击复制</button>
        <div>这里的内容将被复制</div>
    
        <!-- 2. 引入库文件 -->
        <!--  <script src="../dist/clipboard.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
          
        <script>
          //3. 实例化clipboard
          var clipboard = new ClipboardJS('.btn', {
            target: function () {
              //获取文档中第一个 <div> 元素:
              return document.querySelector('div');
              //返回文档中id为copy-btn的元素
              //document.querySelector("#copy-btn");
              //返回文档中 class="btn" 的第一个元素:
              //document.querySelector(".btn");
              //返回文档中 class="btn" 的第一个 <p> 元素:
              //document.querySelector("p.btn");
              //还有更多方法,可自行百度
            },
          });
    
          //复制成功响应
          clipboard.on('success', function (e) {
            console.log(e);
          });
    
          //复制失败响应
          clipboard.on('error', function (e) {
            console.log(e);
          });
        </script>
      </body>
    </html>
    

    可以通过返回文本的方式,实现动态设置复制内容:

    <!-- 该代码可直接创建HTML文件运行 -->
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <title>function-text</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </head>
      <body>
        <!-- 1. 定义基本元素 -->
        <button class="btn">Copy</button>
    
        <!-- 2. 引入库文件 -->
        <!--  <script src="../dist/clipboard.min.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    
        <script>
          //3. 实例化clipboard
          var clipboard = new ClipboardJS('.btn', {
            text: function () {
              return '这里的文本将被复制';
            },
          });
    
          //复制成功响应
          clipboard.on('success', function (e) {
            console.log(e);
          });
    
          //复制失败响应
          clipboard.on('error', function (e) {
            console.log(e);
          });
        </script>
      </body>
    </html>
    

    5. 复制来自AJAX的数据

    那么,问题来了。

    有的业务,需要通过客户端点击的事件,通过ajax,访问数据库后,拿取数据,再进行复制。这种方案如何实现呢?

    其实有比较简单的方法,直接在上面这个代码的 function () 内部,写上ajax响应事件,然后在ajax的success中设置返回文本即可。如下:

    	//3. 实例化clipboard
        var clipboard = new ClipboardJS('.btn', {
            text: function () {
                //return '这里的文本将被复制';
                //
                $.ajax({
                    url: '请求的链接',
                    type: 'POST',
                    //POST的数据
                    data: {
                        _token: $("input[name='_token']").val(),
                        id: $("input[name='id']").val(),
                    },
                    //异步调用关闭
                    async: false,
                    //请求成功:
                    success: function (result) {
                        //返回成功的文本
                        return result.data;
                    },
                    //请求出错
                    error: function (e) {
                        //弹窗提示
                        alert(e.message)
                    }
                });
            },
        });
    

    当然,还有更好的方式。

    下面给出一种比较好的参考方案,是一个通过id请求数据库的一个字段为link(可能为资源分享吧)文本的示例:

    		//定义复制模块JS代码
            const pageCtrl = {
                //发送AJAX请求,生成复制的文本,el是传递数据的
                _codeGenerator: function (el) {
                    const $el = $(el);
                    $.ajax({
                        url: '请求的URL',
                        type: 'POST',
                        data: {
                            _token: el.data('_token'),
                            id: el.data('id'),
                        },
                        //移步请求一定要关闭(false)
                        async: false, 
                        success: function (result) {
                            //可以打印请求后的数据
                            console.log(result.status);
                            //返回成功结果
                            if (result.status === 'success') {
                                $el.data('result', result.data[0].link);
                            }
                            //否则,操作失败,根据具体失败情形提示
                            else {
                                //弹窗提示
                                $.alert(result.msg, '操作失败');   
                                //返回结果不要漏
                                $el.data('result', "");
                            }
                        }
                    });
                },
                /* 复制功能*/
                _clip: function () {
                    const _self = this;
                    const clipboard = new ClipboardJS('.copy-btn', {
                        text: function (el) {
                            //构造参数
                            const $el = $(el);
                            //设置初始值
                            $el.data("_token", $("input[name='_token']").val());
                            $el.data('id', $("input[name='id']").val());
    
                            //ajax请求并设置要复制的字符串
                            _self._codeGenerator($el);
    
                            //返回复制结果
                            return $el.data('result');
                        }
                    });
                    //复制成功后的方法
                    clipboard.on('success', function (e) {
                        // console.log(e.text)
                        $.alert('链接:' + e.text + ' 已复制', '复制成功'                 
                    });
                    //复制失败后的方法 
                    clipboard.on('error', function (e) {
                        console.log(e);
                        $.alert('复制失败,请重试!', '复制失败',)
                    });
                },
                
                //初始化方法          
                init: function () {
                    this._clip();
                }
            };
    
            $(function () {
                //初始化
                pageCtrl.init();
            })
    

    这个示例需要引入JQ(ajax请求)和weui(弹窗,或者把$.alert(‘A’, ‘B’,)修改为普通弹窗alert(A) )。

    当然,如果业务更复杂,可以根据实际进行扩展。

    以上。

    展开全文
  • Electron中的clipboard模块就是用来实现这些功能的,该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等,以下是代码实现。 主进程文件main.js代码如下: // main.js const { app, BrowserWindow } = ...

    软件开发中复制粘贴是一种比较常见的功能,如复制微信号引导用户粘贴去搜索关注,还有常见的复制图片进行粘贴。

    Electron中的clipboard模块就是用来实现这些功能的,该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等,以下是代码实现。

    主进程文件main.js代码如下:

    // main.js
    const { app, BrowserWindow } = require("electron");
    const path = require("path");
    
    
    const createWindow = () => {
        // 创建窗口
        const mainWindow = new BrowserWindow({
            width: 800,
            height: 600,
            webPreferences: {
                // 开启node
                nodeIntegration: true,
                // 取消上下文隔离
                contextIsolation: false,
                // 开启remote
                enableRemoteModule:true,
            }
        });
        // 加载本地文件
        mainWindow.loadFile(path.join(__dirname, "index.html"));
        // 加载远程地址
        // mainWindow.loadURL('https://github.com');
    
        // 开启调试模式
        mainWindow.webContents.openDevTools();
    
    };
    
    
    // 监听应用的启动事件
    app.on("ready", createWindow);
    
    // 兼容MacOS系统的窗口关闭功能
    app.on("window-all-closed", () => {
        // 非MacOS直接退出
        if (process.platform != "darwin") {
            app.quit();
        }
    });
    
    // 点击MacOS底部菜单时重新启动窗口
    app.on("activate", () => {
        if (BrowserWindow.getAllWindows.length == 0) {
            createWindow();
        }
    })
    

    渲染进程文件index.html代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Electron开发</title>
    </head>
    <body>
    	<p>Electron注册全局快捷键及剪切板功能</p>
        <div>
            密钥:<span id="code" style="color:red">341AADF134WR414AF41</span>
        </div>
        <br>
        <div>
            <button id="button" style="margin-right:10px;">粘贴密钥</button>
            <input type="text" style="width:200px;">
        </div>
        <br>
        <div>
            <button id="copyImage">复制图片</button>
        </div>
        <br>
        <script src="./renderer/clipboard.js"></script>
    </body>
    
    </html>

    渲染进程文件index.html中引入的clipboard.js文件代码:

    var { clipboard,nativeImage}=require("electron");
    
    
    var code = document.querySelector("#code");
    var button = document.querySelector("#button");
    var input = document.querySelector("input");
    // 点击复制密钥
    code.onclick=function(){
        clipboard.writeText(code.innerHTML);
        alert("复制成功!");
    };
    
    // 点击粘贴密钥
    button.onclick = function(){ 
        // 获取复制的内容
        input.value = clipboard.readText();
    };
    
    
    
    
    var copyImage = document.querySelector("#copyImage");
    
    // 点击复制图片
    copyImage.onclick = function(){
    
        var image = nativeImage.createFromPath("static/love.png");
        clipboard.writeImage(image);
        // base64图片编码
        var imageSrc = clipboard.readImage().toDataURL();
    
        // 新建图片插入
        var newImage = new Image();
        newImage.src = imageSrc;
        newImage.style.width = "100px";
        newImage.style.height = "100px";
    
        document.body.appendChild(newImage);
    
    }
    

    效果图如下:

    展开全文
  • 如果你省略这属性,则默认为复制(copy)。cut只能在input和textare中起作用.***器打好基下是求的响的可域适的一的近重交的2.data-clipboard-target指向复印节点,这里指input的到二新,为都础过过发等宗和发制数...
  • 复制文本是一很常见的场景, 比如淘宝的复制订单号, 点击复制实现订单号的复制. 安装: npm i --save clipboard html: <template> <div class="line fs14"> <div class="label color-gray"&...
  • 下载 npm install clipboard --save 按需引入 大部分教程都是直接在app.js引入,挂载在vue上...比如说我有一一键复制按钮,那么我就给这按钮加一class;或者其他元素都可以,但是要加一class。我这里当按钮点
  • 纯js复制有弊端:1.想要复制图片+文字比较麻烦2.只能在input节点里面复制文字function copyContact(el) {var oInput = document.createElement('input');//'textarea'oInput.value = "666666666666";document.body....
  • 最近在工作中有一需求,就是需要使用一按钮实现相应内容的复制。在网上找了很解决方案,最后对比之下选择了clipboard.js插件来进行实现。因为它不依靠flash以及其他框架,而且体积小使用简单兼容性也好。下面...
  • 在不考虑兼容低版本浏览器的情况下,对于传统的复制到剪切板是得使用flash来完成,这杨非常的臃肿及文件大小较大 步骤(分两方法下载) 第一方法:基础步骤 &lt;!-- 引入相关的 clipboard 文件 --&...
  • 项目地址:https://github.com/zenorocha/clipboard.js ...现代化的“复制到剪切板”插件...它不需要配置几十步骤或者加载几百 KB 的文件。最重要的是,它不应该依赖 Flash 或其他臃肿的框架。 这是 clipb...
  • 突然某一天测出了一bug:移动端复制失败,pc端是ok的。简直一脸懵逼。。。  遇到这bug,我第一思考到的是,这是常用的插件,网上应该有现成的解决方法。网友分享的方法是:把绑定data-cli...
  • clipboard使用总结

    万次阅读 2020-06-22 19:32:18
    clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+...
  • 今天总结下项目中遇到的有关复制文本的问题两种解决方法: vue-clipboard2 1、安装 vue-clipboard2 插件 npm i vue-clipboard2 2、在main.js中添加 import Vue from 'vue' import VueClipboard from 'vue-...
  • vue中Clipboard 复制剪切功能的实现

    千次阅读 2018-08-17 10:51:43
    如果你省略这属性,则默认为复制(copy)。cut只能在input和textare中起作用. ***2.data-clipboard-target指向复印节点,这里指input的目标id ; ***3.好消息是,如果你需要支持旧浏览器,clipboard.j...
  • jquery实现多个点击复制按钮

    千次阅读 2017-01-19 12:08:56
    上一篇博客的升级版,哈哈,功能室实现了,但是代码写...话不说,先上代码 点我复制 点我复制 点我复制 点我复制 var btn = []; var url = [] var len = $("input").size(); for (var i = 0; i < le
  • clipboard.js实现复制(IE兼容至IE7)

    千次阅读 2016-01-03 15:54:01
    前端纯clipboard.js实现兼容至IE7的复制功能,把flash插件甩出几条街····
  • 1,首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。 下载地址:ZeroClipboard.js 注意:以上 ZeroClipboard.js, ZeroClipboard.swf...
  • 一、copy-to-clipboard 官方定义: Simple module ...比如:我想设计一在Select选择项改变的时候复制该选择项,这时候一般无法插入组件(等会会介绍一react复制组件的npm),这时候用copy-to-clipboard就非常合适. ...
  • 将文本复制到剪贴板应该不难。配置它不需要几十步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。 安装 从npm安装 npm install ...
  • 将文本复制到剪贴板应该不难。配置它不需要几十步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。安装从npm 安装npm install clipboard --...
  • 页面是由 v-for 循环渲染出来,要给每一结构里面的复制按钮加一个复制功能  npm install clipboard --save 安装,如果安装处问题,安装几次,我自己也安装了好几次 import Copy1 from 'clipboard' 在复制功能...
  • 公司项目有用到clipboard.js,由于好奇心顺手点开了源码看看其究竟是如何实现的,本以为是九曲十八弯错综复杂,其实还是挺容易看懂的,所以就分享下读后感哈哈。 本篇读后感分为五部分,分别为前言、使用、解析、...
  • 最近在工作中有一需求,就是需要使用一按钮...最近支付宝吱口令在网页上自动复制到Android和ios的代码很,因此作者在此分享一如何使用插件实现吱口令复制到粘贴板的功能。引入插件,可以下载,也可以使用第...
  • 在工作中会遇到一些需求场景,例如粘贴图片后自动上传,富文本编辑器内粘贴文本与图片,这些都与 Clipboard API 相关,在此讲解一下最新的 Clipboard API 的内容。本文的示例页面: Clipboard API demo代码地址: ...
  • 一、简介浏览器允许 JavaScript 脚本读写剪贴板,自动复制或粘贴内容。一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期。...Document.execCommand()方法异步的 Clipboard APIcopy事件和paste事件本文逐...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,915
精华内容 2,766
关键字:

clipboard复制多个参数

友情链接: 12345.rar