clipboard 订阅
Clipboard 展开全文
Clipboard
信息
操作系统
未知
开发语言
开源协议
未知
Clipboard
Clipboard是一个用来操作系统剪切板的jQuery插件,它支持多种浏览器,在IE下使用的内置的方法,其他浏览器使用Flash的方式来处理,因此需要Flash8或者以上的版本的支持。
收起全文
精华内容
参与话题
问答
  • clipboard剪贴板插件

    千次阅读 2018-09-14 10:37:00
    clipboard插件可以方便的将组件中的文本(或者是其他目标文本)复制到剪贴板上。我们可以在下面的网址获得到: https://www.bootcdn.cn/clipboard.js/ 官网:https://clipboardjs.com/ api:...

    clipboard插件可以方便的将组件中的文本(或者是其他目标文本)复制到剪贴板上。我们可以在下面的网址获得到:

    https://www.bootcdn.cn/clipboard.js/ 

    官网:https://clipboardjs.com/

    api:  https://www.bootcdn.cn/clipboard.js/readme/

     

    首先说一个遇到的问题。新版本中的构造函数是clipboardJS(),而不是clipboard()。因此在构造对象时,若遇到了下图的错误(非法构造器),则是构造方法写错了。

     

     

    一、简单的demo

    1. 引入clipboard.min.js

    <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    2.编辑组件

    <div id="phone" class="tel" data-clipboard-text="" >
        电话号码是:17788889999
    </div>

    3.编辑js

    <script type="text/javascript">
        //id选择器:"#id";class选择器:".tel";
        var clipboard=new ClipboardJS("#phone");
        clipboard.on('success', function(e) {
            console.info('text',e.text);
        });
        $("#phone").attr({
            "data-clipboard-text": "17788889999"
        });
    
    </script>

    4.展示效果

    点击文字后

     

    二、使用详解

     

    1. 从指定的目标源赋值文本

    data-clipboard-target:指向复印节点。可以使用id选择器(#id)、标签选择器(div)等。

    data-clipboard-action:该属性不指定,则默认值是copy;可以指定为cut。cut只能在input和textare标签中起作用。

    <!-- eg1: -->
    <input id="foo" type="text" value="hello" />
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
    
    <!-- eg2: -->
    <textarea id="bar">hello</textarea> 
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击复制</button>
    
    <!-- eg3: -->
    <div>hello_div</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">点击复制</button>
    
    
    //js可以供以上三个例子使用:
    <script>
        // 这里使用的是button的class的值。也可以使用id值(#id)
        var clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function(e) {
            console.info('Action:', e.action);  //copy或者cut操作
            console.info('Text:', e.text);      //复制的文本内容
            console.info('Trigger:', e.trigger);    //触发的元素
    
        });
        clipboard.on('error', function(e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
        });
    </script>

     

    2.通过函数指定要复制的文本

    下面四个例子分别对应四个不同的复制方法

    <!-- eg1:复制target函数指定的结点内容 -->
    <button class="btn">点击复制</button>
    <div>这里是被复制的内容</div>
    <script>
        var clipboard = new ClipboardJS('.btn', {
            //通过target指定要复印的节点
            target: function() {
                return document.querySelector('div');
            }
        });
        clipboard.on('success', function(e) {
            console.info("复制的内容",e.text);
        });
        clipboard.on('error', function(e) {
            console.error("e",e);
        });
    </script>
    
    
    
    <!-- eg2:复制text函数的返回值内容 -->
    <button id="btn">点击复制</button>
    <script>
        var clipboard = new ClipboardJS('#btn', {
            // 点击按钮,直接复制text函数的返回值
            text: function() {
                return '这里是被复制的文本内容';
            }
        });
        clipboard.on('success', function(e) {
            console.info("复制的内容",e.text);
        });
        clipboard.on('error', function(e) {
            console.error("e",e);
        });
    </script>
    
    
    
    <!-- eg3:通过指定的节点对象,传参给Clipboard。复制data-clipboard-text中的内容 -->
    <div id="btn" data-clipboard-text="这里是被复制的内容">
        <span>点击复制</span>
    </div>
    <script>
        /*var btn = document.getElementById('#btn');
        var clipboard = new ClipboardJS(btn);*/
        var clipboard = new ClipboardJS("#btn");
        clipboard.on('success', function(e) {
            console.info("复制的内容",e.text);
        });
        clipboard.on('error', function(e) {
            console.error("e",e);
        });
    </script>
    
    
    
    <!-- eg4:复制多个dom结点中指定的文本内容 -->
    <button class="button" data-clipboard-text="这里是被复制的文本内容1">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容1</button>
    <button class="button" data-clipboard-text="这里是被复制的文本内容2">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容2</button>
    <button class="button" data-clipboard-text="这里是被复制的文本内容3">无论点击哪一个按钮都复制三个按钮中属性指定的文本内容3</button>
    
    <script>
        /**
        //通过标签结点构造对象
        var btns = document.querySelectorAll('button');
        var clipboard = new Clipboard(btns);
        */
        //通过类名构造对象
        var clipboard = new Clipboard(".button");
        clipboard.on('success', function(e) {
            console.info("e",e);
        });
        clipboard.on('error', function(e) {
            console.error("e",e);
        });
    </script>

     

     

    展开全文
  • clipboard 多次回调

    2019-08-26 23:32:14
    引入插件文件,clipboard 无需juquery 支持。 <button class="copy" id="copy" onclick="copy('#copy')" data-clipboard-text="1000000">复制QQ号</button> function copy(copyid){ var clipboard ...

    引入插件文件,clipboard 无需juquery 支持。

    <button class="copy" id="copy" onclick="copy('#copy')" data-clipboard-text="1000000">复制QQ号</button>
    function copy(copyid){
    	var clipboard = new Clipboard(copyid)
    	
    	clipboard.on("success", function (e) {
    		console.log('已经成功复制');
    
    		clipboard.destroy();
    	});
    }

     

    展开全文
  • vue 中复制到剪贴板功能 v-clipboard

    千次阅读 2019-04-11 15:21:41
    1.在vue 官网--生态系统--Vue资源 找到里面的 v-clipboard 2. 在文档里面有具体的使用步骤 1.安装依赖 npm install --save v-clipboard 2.在main.js中引入 import Vue from 'vue' import Clipboard from 'v-...

    1.在vue 官网 /资源列表/Awesome Vue 里面搜索 clipboard 即可以找到 v-clipboard

     

     2. 在文档里面有具体的使用步骤

    1.安装依赖
    npm install --save v-clipboard
    
    2.在main.js中引入
    import Vue from 'vue'
    import Clipboard from 'v-clipboard'
    
    Vue.use(Clipboard)
    
    3.使用
    <template>
        <button v-clipboard="value"
            v-clipboard:success="clipboardSuccessHandler" 
            v-clipboard:error="clipboardErrorHandler">    
            Copy to clipboard
       </button> 
    </template>
    
    
    export default {
       data() {
          return {
             value:'2659100297@qq.com'
          }
       },
       methods: {
          // Success event handler 
          clipboardSuccessHandler ({ value, event }){
             console.log('success', value);
             this.$message.success("已复制");
          },
          // Error event handler
          clipboardErrorHandler ({ value, event }) {
             console.log('error', value)
          }
        }
    }
    

     

    展开全文
  • clipboard.js 踩坑

    千次阅读 2019-05-22 03:34:21
    看之前同事的代码 引用的:clipboard.js 看了一个github,感觉是一个成熟的插件了,于是放心的使用了。 <!--引用--> <script src=...

    因为最近产品的需求,要在移动端 实现复制功能,我就知道是个坑。看之前同事的代码 引用的:clipboard.js 看了一个github,感觉是一个成熟的插件了,于是放心的使用了。

    <!--引用-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
    
    <!--html-->
    <div class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </div>
    
    <script>
    var clipboard = new ClipboardJS('.btn');
    
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
    
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    </script>
    复制代码

    差不都是这样,引用之前同事实践过,我也没在手机上细测,毕竟人家前一轮通过测试了啊。然后果然,要发布的时候测试说,安卓上测试不了呢,,,what?前一轮怎么测试的?我哭了,网上百度各种方法(各种ios android不兼容),一个较多的说法是 使用div等非 input textarea复制时会出现复制失败的情况(这时其实我没有注意问测试用的哪个浏览器)。 然后就改了input的使用方法

    <!-- Target -->
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" style="z-index:-1;position:absulote;top:-1000px;left:-1000px;">
    
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">
        <img src="assets/clippy.svg" alt="Copy to clipboard">
    </button>
    复制代码

    差不多这样 就是把input隐藏显示了。然后试了下,ios好的,安卓也是可以的。于是发布测试。。。然后测试的小米手机和华为手机不知道什么浏览器复制成功了,但是出现了调起软键盘的现象,我的ios没有,显然测试希望我隐藏掉。。。于是百度阻止调起键盘的情况,然后我是这么写的。

    <script>
    <!--位置一-->
    $("input").focus(function(){
        document.activeElement.blur();
    });
    <!---->
    var clipboard = new ClipboardJS('.btn');
    
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        alert('成功')
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        alert('失败')
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
    
    <!--位置二-->
    $("input").focus(function(){
        document.activeElement.blur();
    });
    <!---->
    </script>
    复制代码

    发现显示成功,但是复制了奇怪的dom。。想哭。

    然后我又去百度使用div的情况发现人家说的是ios打不开而我是安卓有问题,所以我觉得方法可能没问题 我要针对的测试一下, 于是又改回第一种写法,针对ios和安卓的浏览器认真的测试了一下,结果如下: 我的ios 11.3 微信 ok; safari:ok;uc:成功 测试的小米手机 微信ok 自带浏览器:ok;uc:失败 但是有一点就是uc触发了error事件,但实际剪切板是剪贴到了内容的。。。。本来想说反正都读到了,就把提示改成成功吧(窃喜)。开开心心的发布测试。 你以为会这么顺利吗????!当然不可能,那我几天就不会写这个文档记录了。问题是测试的ios12.2 uc触发error事件了, 但是没有复制到内容。看github上的issues果然又说not work >ios12。更多的是说have problem in UC brower。。果然是差不多的情况,然后作者说他没办法,,,但是国内其实UC还是很多人用的。真想骂人,虽然我用安卓手机的时候 也是UC的使用者。。。调试发现虽然复制失败但是其实console.error('Trigger:', e.trigger)是正确的;然后说用这个事件 就试试。

    <!--我用了jq-->
    new ClipboardJS('.btn', {
        text: function(trigger) {
            return $(trigger).data("clipboard-text")
        }
    });
    复制代码

    发现uc还是无法复制到剪贴板。。

    然后又不能不用啊。。。就只能想代替方案。

      this.clipboard.on("success", function(e){
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            e.clearSelection();
        });
        // ClipboardJS安卓机有问题
        this.clipboard.on("error", function(e){
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            $('.showCopy p').html($(e.trigger).data("clipboard-text"));
            $('.showCopy').show();
            $('.js_mask1').show();
        });
        
                <!-- 复制失败补偿 -->
            <div class="showCopy">
                <h3>复制失败,请长按复制</h3>
                <p></p>
                <div class="closed-btn js_closed_copy">关闭</div>
            </div>
             <!-- 复制失败补偿 -->
             
             .showCopy{
        display: none;
        position:fixed;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
        padding: 20px;
        z-index: 9999;
        -webkit-user-select:all;
    	-moz-user-select:all;
    	-o-user-select:all;
        user-select:all;
        background: #fff;
        
    }
    .showCopy p{
        padding: 5px 0;
        font-size: 16px;
    }
    .showCopy .closed-btn{
        margin: 10px auto 0;
        border: 1px solid red;
        padding: 4px 18px;
        width: 80px;
        color: red;
        font-size: 13px;
        border-radius: 4px;
        text-align: center;
    }
    复制代码

    是的 就是error的时候跳个弹框 手动复制..这个其实不难。但是我遇到的问题是其实很多项目 都会-webkit-user-select: none; 禁止长按事件这个需要手动复制冲突,所以就把css贴出来。 差不多就是这个方案了。。。。

    重点:垃圾UC/垃圾UC/垃圾UC/垃圾UC/垃圾UC

    转载于:https://juejin.im/post/5ce4c0c7e51d45105d63a452

    展开全文
  • clipboard使用和报错解决

    千次阅读 2018-11-15 15:57:07
    1.clipboard简介 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。 2.下载地址 clipboard官网 3.使用 (1)第一步:引入js文件: &lt;script src="&lt;%=request....
  • npm install --save vue-clipboard2 main.js import Vue from 'vue' import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 方式一 &lt;template&gt; &lt;div class="container&...
  • clipboard实现点击复制

    千次阅读 2019-03-01 09:13:54
    1:下载clipboard.min.js 文件 或者clipboard.min.zip 压缩包 并加压缩。 2:引入clipboard.min.js文件。 3:使用 代码如下: //(1)引入文件 此处是我的js文件所在的位置,根据自己情况正确引入文件 &amp...
  • Clipboard.js 实现点击复制

    万次阅读 2018-05-15 18:27:33
    在开发过程中难免会遇到点击...第一种: 通过原生js 的方法用(存在兼容性): document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 参数说明: aCommandName &nbsp;&nbsp;...nb...
  • clipboard使用总结

    2020-06-22 19:32:18
    clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+; IE 9+...
  • 1. 概述clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; Firefox 41+...
  • vue中Clipboard 复制剪切功能的实现

    千次阅读 2018-08-17 10:51:43
    ***1.data-clipboard-action=""属性来指明 复制(copy)还是剪切(cut)内容。 如果你省略这个属性,则默认为复制(copy)。cut只能在input和textare中起作用. ***2.data-clipboard-target指向复印节点,...
  • clipboard.js: clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框,文本域,DIV元素中的文本等文本内容复制到剪贴板中 clipboard.js支持主流的浏览器:chrome 42+; ...
  • 项目使用vue框架,iview的UI框架。... 参考了网上对于clipboard插件的引用。这里是他的github地址:...1. 引入clipboard.js 2.在需要使用的组件中import 3. 添加需要复制的内容 4.添...
  • 1、安装clipboard npm install clipboard --save 2、引入clipboard (1)全局引入,在main.js引入 import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard; (2)在某个...
  • 引入jQuery和clipboard文件 <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> <script src=...
  • 文章目录一、vue-clipboard2 (clipboard.js) 简介1、简介2、兼容性二、使用方法 Demo1、clipboard.js 的使用2、vue-clipboard2 的使用三、模态框(弹窗)组件失效问题clipboard.js 解决方案vue-clipboard2 解决方案 ...
  • vue使用vue-clipboard2 复制到粘贴板

    万次阅读 多人点赞 2019-09-22 17:15:55
    npm地址https://www.npmjs.com/package/vue-clipboard2 安装 npm install --save vue-clipboard2 ...import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 这样就可以全局使用了 符合单文...
  • copy-to-clipboard API用法

    千次阅读 2018-11-26 15:27:34
    npm install --save copy-to-clipboard 2.使用API; import copy from 'copy-to-clipboard'; 在react中使用案例 handleCopy = () =&gt; { const text = this.refs.test.innerHTML; copy(text); Toast....
  • react-copy-to-clipboard, 复制到剪贴板响应组件 react-copy-to-clipboard 复制到剪贴板响应组件基于 copy-to-clipboard将尝试使用execCommand回退到 IE 特定的clipboardData接口,最后回退到简单的
  • vue-clipboard2的使用

    千次阅读 2020-02-11 19:15:08
    文章目录1、vue-clipboard2介绍2、vue-clipboard2安装3、使用3.1 第一种方法使用3.2 第二种方法使用 1、vue-clipboard2介绍 vue-clipboard2是前端能够调用剪切板的一个插件。具体的描述官网上也有具体的说明, npm...
  • Vue前端复制文本功能vue-clipboard2

    千次阅读 2019-10-17 20:18:45
    复制文本控件使用的是vue-clipboard2,可方便的实现复制需求。 源码工程地址:Clipboard 安装 yum install vue-clipboard2 使用方式 步骤一: import ClipBoard from 'vue-clipboard2' export default ({Vue}) =>...
  • vue-clipboard2基本操作

    千次阅读 2017-12-26 17:00:21
    123
  • 一键复制clipboard兼容ios系统

    千次阅读 2019-04-08 19:34:32
    项目中使用到一键复制链接打开,使用了clipboard这个插件,在安卓使用正常,但ios会出现兼容问题,点击无效; 解决方案:ios默认非点击标签(除button,input等)不具有点击效果,所以给这些标签添加相关属性,这样...
  • react复制内容到剪贴板 ---- 依赖包react-copy-to-clipboard 一、安装插件依赖包(react-copy-to-clipboard) npm install --save copy-to-clipboard 二、引用插件 import copy from 'copy-to-clipboard'; 三、实际...
  • 文档: https://www.npmjs.com/package/vue-clipboard2 安装 npm install --save vue-clipboard2 使用 ...import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 示例1 demo1.vue...
  • 在谷歌浏览器是可以复制成功的,但在360安全浏览器(极速模式或兼容模式)复制不成功,浏览器都已更新到最新版本。 安装: npm install vue-clipboard2 ...import VueClipboard from 'vue-clipboard2'; Vue.use(Vue...
  • vue 粘贴复制功能 vue-clipboard2

    千次阅读 2018-09-27 16:37:59
    地址: https://vue-clipboard2.inndy.tw/ npm install --save vue-...import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) Sample: &lt;div id="app"&gt;&lt;/d...
  • 首先要安装依赖:npm install --save vue-clipboard2 然后在main.js中引入: vue-cli: import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) 常规用法: <script src="vue.min.js">&...
  • 1、安装vue-clipboard2插件:npm install --save vue-clipboard22、main.js添加import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)3、copy组件:message绑定需要复制的文本/onCopy复制成功回调/on...
  • 使用到的是vue-clipboard2 插件,简单又好用 首先,需要先安装这个插件 npm install --save vue-clipboard2 然后,在vue 项目中的main.js 中引入 import Vue from 'vue' import VueClipb...

空空如也

1 2 3 4 5 ... 20
收藏数 64,459
精华内容 25,783
关键字:

clipboard