1. vue  中的复制粘贴:

<div class="mainTextItem"  @click="copyTXTOne" id="copyOne" data-clipboard-target="#input1">

     <!-- 复制的内容写在 input1里面 -->

     <input type="text" v-model="goods_number" id="input1" readonly="readonly">

</div>
　　　　　//引入clipboard.js
 　　　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

　　　　　　<script>

　　　　　　　　　　copyTXTOne(){

                    var that = this;

                    var clipboard = new ClipboardJS('#copyOne')

                    // 显示用户反馈/捕获复制/剪切操作后选择的内容

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

                        e.clearSelection();//清除选中样式（蓝色）

                        alert("复制成功")

                    })

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

                        alert("复制失败")

                    });

                },

　　　　　　</script>

2.  非  vue的 复制粘贴 ClipBoard.js使用

<!DOCTYPE html>

<html>

<head>

    <title>ClipBoard.js使用：修改HTML</title>

    <meta charset="utf-8">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

</head>

<body>

<!--案例一：从另一元素复制文本：通过data-clipboard-target在触发器中添加属性来实现-->

<input type="text" id="input">

<button id="copy" data-clipboard-target="#input">复制input框中的内容</button>

<textarea name="" id="" cols="30" rows="10"></textarea>

</body>

</html>

<script type="text/javascript">

    var clipboard = new ClipboardJS('#copy')

    // 显示用户反馈/捕获复制/剪切操作后选择的内容

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

        console.info('Action:', e.action)//触发的动作/如：copy,cut等

        console.info('Text:', e.text);//触发的文本

        console.info('Trigger:', e.trigger);//触发的DOm元素

        e.clearSelection();//清除选中样式（蓝色）

    })

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

        console.error('Action:', e.action);

        console.error('Trigger:', e.trigger);

    });

</script>

参考链接:https://www.cnblogs.com/yangguoe/p/9682316.html

　

clipboard.js官网链接: https://clipboardjs.com/

前端复制粘贴文字clipBoard.js的使用的更多相关文章

  1. 移动端无法复制：使用clipboard.js碰到的一个小问题

    移动端无法复制:使用clipboard.js碰到的一个小问题   直接看下面的代码:在移动端访问,点击,能正常复制. <html> <head> <meta http-e ...

  2. 前端复制粘贴clipBoard.js的使用

    <!DOCTYPE html> <html> <head> <title>ClipBoard.js使用:修改HTML</title> < ...

  3. vmware12中ubuntu16.10的vmware tools失效，导致不能复制粘贴文字以及自动适应窗口分辨率

    问题: 复制命令后,在vmware的ubuntu中粘贴不了,网上说要安装VMWare Tools,但是安装了VMWare Tools 还是不行! 最终找到如下方法: 新安装或异常关机和重新划分分区导致 ...

  4. Js 之复制到剪贴板 clipboard.js

    一.下载 https://github.com/zenorocha/clipboard.js/archive/master.zip 二.Demo示例 <!DOCTYPE html> < ...

  5. html5: 复制到剪贴板 clipboard.js

    1.使用clipboard.min.js工具,引用此js 注意事项: IOS微信网页开发中,若使用此工具来开发复制功能,则需要在超链接/按钮上新增 onclick=" " 2.cl ...

  6. vue中点击复制粘贴功能 clipboard 移动端

    页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save    安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...

  7. Android复制粘贴文字

    /** * 实现文本复制功能 * * @param content */ public static void copy(String content, Context context) {// 得到 ...

  8. 现代化的拷贝文字---clipboard.js

    参考链接:http://www.clipboardjs.cn/

  9. Android中的复制粘贴

    Android中的复制粘贴 The Clipboard Framework 当使用clipboard framework时,把数据放在一个剪切对象(clip object)里,然后这个对象会放在系统的 ...

随机推荐

  1. SpringCloudStream(RabbitMQ&Kafka)&Spring-Kafka配置使用

    目录 是什么 解决问题 使用方式 创建生产者项目 pom yml 生产消息方法 接口 实现 创建消费者项目 pom yml 接收消息方法 重复消费 消费者yml 持久化 消费者负载个性配置(预拉取) ...

  2. tp6微信公众号开发者模式token认证

      微信公众号开发完整教程(一) PHP7.0版本,TP5.0框架 技术标签: 微信公众号开发         因为工作的需要,这一两年对微信公众号和小程序,项目制作的比较多.所以我才打算写一篇全面的 ...

  3. 如何实现 UITabbarController 的 State Preservation?

    原文链接 最近在看ios programming - the big nerd ranch guide 这本书,其中第24章介绍了如何使用系统接口来实现 State Restoration. 示例部分 ...

  4. 基于Zookeeper的分布式锁(干干干货)

    原文地址: https://juejin.im/post/5df883d96fb9a0163514d97f 介绍 为什么使用锁 锁的出现是为了解决资源争用问题,在单进程环境下的资源争夺可以使用 JDK ...

  5. 【数据库】SQL 语句大全

    数据操作 SELECT --从数据库表中检索数据行和列 INSERT --向数据库表添加新数据行 DELETE --从数据库表中删除数据行 UPDATE --更新数据库表中的数据 数据定义 CREAT ...

  6. JavaScript闭包的概念及用法

    1.闭包的概念: 闭包就是能够读取其他函数内部变量的函数. 例如: function f1(){ var n=999; function f2(){ alert(n); } return f2; } ...

  7. JavaWeb——Http

    4.1.什么是http http(超文本传输协议)是一个简单的请求-响应协议,它通常运行在TCP之上. 文本:无链接 超文本:利用超链接将普通文本的信息组织在一起的超级文本 4.2.http两个时代的 ...

  8. 为什么要从Web form过渡到MVC中

    可以说,在未来几年中,Web form的使用会逐渐减少,而取而代之的就是MVC.可能你不会同意我的观点,那么我就试着阐述一下我的观点,如果你还是不能接受,那么请你反驳我. 学习一个新语言或者是新架构是 ...

  9. 8元电调调参教程（使用Arduino Uno）| BLHeli无刷电调的固件烧写及调参

    前言 淘某上有款8元电调,性价比很高,但是需要简单设置一下 1.材料清单 (1)Arduino UNO开发板 (2)BLHeliSuite 16.7.14.9.0.1 调参软件及固件已上传Gitee: ...

  10. CF1430F Realistic Gameplay (贪心+DP)

    朴素做法暴力DP,O(nk)过不去... 1 #include <cmath> 2 #include <cstdio> 3 #include <cstring> 4 ...