运用jQuery剪切版插件实现复制粘贴功能

心已赠人 2022-05-19 11:04 235阅读 0赞

今天遇到这么一个功能，，点击“复制“按钮，可以进行复制。  
![这里写图片描述][70]

当时在做vue项目的时候有用到过vue的剪切版组件。可是这个后台系统是用jquery写的。当时就想到肯定有这么一个插件。  
一番搜索之后，找到了。

**参考博客** http://blog.wpjam.com/m/clipboard-js/

这里我就不一一说明了，这里强调的是，在我的项目出现的问题。  
上代码

参考博客中有提到：**如果复制的文字是隐藏的，可以通过 data-clipboard-text 定义到点击的按钮上**

HTML

<a data-clipboard-text ="{
       {url('/api/admin/answer/questionnaire/get')}}?language=1&questionnaire_id={
       {$questionnaire->id}}" 
    class="copy-data">复制</a>

JS

<script type='text/javascript' src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>   //clipboard.js的cdn资源
    <script type="text/javascript">
        //设置剪切板数据
    	var copyValue =  $(".copy-data").data("clipboard-text");
    
        var clipboard = new Clipboard('.copy-data', { 
            text: function(){ 
    	        return copyValue;
            }
        });
    
        clipboard.on("success",function (e) { 
    	    //自己写的一个“复制成功“的提示语,复制成功后执行
            $(".copy-success-box").show();
            setTimeout(function () { 
                $(".copy-success-box").hide();
            },1500);
        })
    </script>

但是问题来了，我的项目是不能按照博主所说，将复制内容存到定义的变量中，因为我的有很多个，如果存储起来的话，只会展示最后一个。  
所以自己根据**事件委托**，小小的改进了一下。

<script type="text/javascript">
        //设置剪切板数据
        var clipboard = new Clipboard('.copy-data', { 
            text: $(".copy-data").on("click",function (e) { //点击之后，再拿到当前点击的那一个存储的值
                let $target = $(e.target);
                return $target.data(`clipboard-text`);
            })
        });
    
        clipboard.on("success",function (e) { 
            $(".copy-success-box").show();
            setTimeout(function () { 
                $(".copy-success-box").hide();
            },1500);
        })
    </script>

这样改动之后就可以做到，点击每一个复制都会复制的是当前的内容，而不会影响其它的项。

[70]: /images/20220519/d0a1f3d116b049b7b953a71cb7bff60c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 实现复制粘贴功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8...

本是古典何须时尚/ 2024年04月18日 21:58/ 0 赞/ 38 阅读

相关 php android 复制粘贴板,android实现文本复制到剪切板功能(ClipboardManager)

注意：导包的时候 API 11之前： android.text.ClipboardManager API 11之后： android.content.ClipboardMa

柔光的暖阳◎/ 2023年01月15日 06:59/ 0 赞/ 113 阅读

相关 clipboard 实现复制粘贴功能

<el-form-item label="ticketKey"> <span id="code">{ { baseForm.ticketKe

电玩女神/ 2022年10月31日 00:42/ 0 赞/ 241 阅读

相关 editor.md 实现拖拽剪切复制粘贴上传图片,文件插件

> editor.md作为一款Markdown编辑器,界面美观,功能强大 > 但是图片,文件上传方面缺少了剪切,拖拽上传,有那么一点每中不足，下面就简单实现一个，废话不多说

迷南。/ 2022年09月07日 14:53/ 0 赞/ 127 阅读

相关 vi & vim复制，粘贴，剪切文本

我经常用vi编辑器，但基本上还是windows的习惯，没有系统的学过其功能，今天遇到了文本的复制这没有办法了，查看一下解决如下：引用文本： \------------

淩亂°似流年/ 2022年08月05日 08:14/ 0 赞/ 208 阅读

相关 JS 实现复制粘贴功能

JS 实现复制粘贴功能目前没有做过多的测试，只是测试了几个手机，介绍：支持情况（1）移动端： 1. chrome（版本 58.0.3029.96 (64

柔光的暖阳◎/ 2022年06月15日 04:57/ 0 赞/ 207 阅读

相关 jquery 插件zClip实现复制到剪贴板功能

相信这个功能大家平时上网经常能碰到，以前也没怎么留意怎么实现的，直到项目中需要。网上一搜一大堆，单纯使用js方法也不是没有，但是由于各浏览器的安全机制不同，不是跨浏览器的。

阳光穿透心脏的1/2处/ 2022年05月23日 11:39/ 0 赞/ 175 阅读

相关运用jQuery剪切版插件实现复制粘贴功能

今天遇到这么一个功能，，点击“复制“按钮，可以进行复制。 ![这里写图片描述][70] 当时在做vue项目的时候有用到过vue的剪切版组件。可是这个后台系统是用jquer

心已赠人/ 2022年05月19日 11:04/ 0 赞/ 236 阅读

相关 JavaScript实现剪切板复制功能

实现input框复制功能 <html> <head> <meta charset="UTF-8"> <meta n

女爷i/ 2022年02月15日 07:41/ 0 赞/ 270 阅读

相关 vim选中字符复制/剪切/粘贴

【背景知识】 vim 有 12 个粘贴板，分别是 0、1、2、...、9、a、“、＋；用 :reg 命令可以查看各个粘贴板里的内容。在 vim 中简单用 y 命令只是复制到

喜欢ヅ旅行/ 2022年01月20日 13:59/ 0 赞/ 603 阅读