<!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>

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

  1. 前端复制粘贴文字clipBoard.js的使用

    1. vue  中的复制粘贴: <div class="mainTextItem" @click="copyTXTOne" id="copyOn ...

  2. js实现剪切、复制、粘贴——clipBoard.js

    摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...

  3. 前端 JavaScript 复制粘贴的奥义——Clipboard 对象概述

    前言 作为一名资深搬砖工,你要问我用得最熟练的技能是什么,那我敢肯定且自豪的告诉你:是 Ctrl+C !是 Ctrl+V! 不信?你来看看我键盘上的 Ctrl.C 和 V 键,那油光发亮的包浆程度,不 ...

  4. 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓

    <!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...

  5. h5微信浏览器复制粘贴--ios兼容问题的解决方法（clipboard.js插件）

    前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...

  6. 复制粘贴插件（不包含 Flash）——clipboard.js

    clipboard.js是现代化的“复制到剪切板”插件.不包含 Flash.gzip 压缩后仅 3kb.不依赖 Flash 或其他臃肿的框架.API:https://clipboardjs.com c ...

  7. 前端技术之：如何在Vue中使用clipboard.js复制服务端数据

    第一步 创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-b ...

  8. js 复制粘贴功能记录

    最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制 首先复制的过程分为两步曲,无论 ...

  9. Clipboard.js – 现代方式实现复制文本到剪贴板

    复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...

随机推荐

  1. 给我一对公钥和私钥，我就能破解此RSA

    RSA密码系统如果暴露了一套公钥和私钥,那么这套密码系统就全部失效了.因为根据公钥和私钥可以完成大整数的分解.暴露了两个质数. 记公钥为e,私钥为d,因为ed%phi=1,所以就得到了一个k=ed-1 ...

  2. DPDK的安装与绑定网卡（转）

    from:http://www.cnblogs.com/mylinuxer/p/4274178.html DPDK的安装与绑定网卡 DPDK的安装有两种方法: 第一种是使用dpdk/tools/set ...

  3. nginx 中文和英文资料

    http://www.nginx.cn/doc/ http://manual.51yip.com/nginx/ http://tool.oschina.net/apidocs/apidoc?api=n ...

  4. mac下 cordova 搭建

    最近遇到一个cordova搭建的项目,于是看了看如何搭建这个.  这个其实 和 phoneGap 差不多,都是为了方便html跨平台才产生的产物.  cordova  也可以生成  iOS  和 安卓 ...

  5. 解决方案，org.hibernate.LazyInitializationException: could not initialize proxy - no Session

    org.hibernate.LazyInitializationException: could not initialize proxy - no Session org.hibernate.pro ...

  6. 【Linux】字符转换命令expand

    这命令就是在将 [tab] 按键转成空格键: [root@www ~]# expand [-t] file 选项与参数: -t :后面可以接数字.一般来说,一个 tab 按键可以用 个空格键取代. 我 ...

  7. android蓝牙开发---与蓝牙模块进行通信

    近半个月来一直在搞android蓝牙这方面,主要是项目需要与蓝牙模块进行通信.开头的进展很顺利,但因为蓝牙模块不在我这里,所以只能用手机测试.一开头就发现手机的蓝牙不能用,为了证明这点,我刷了四次不同 ...

  8. java udp 广播

    原文链接: http://blog.csdn.net/yudajun/article/details/8477149 udp 是一种网络通信协议,不需要客户端和服务器端建立连接即可进行通讯功能.相对于 ...

  9. Python 文件 seek() 方法

    概述 Python 文件 seek() 方法用于移动文件读取指针到指定位置. 语法 seek() 方法语法如下: fileObject.seek(offset[,whence]) 参数 offset  ...

  10. 【转载】java前后端 动静分离，JavaWeb项目为什么我们要放弃jsp？

    原文:http://blog.csdn.net/piantoutongyang/article/details/50878214 今天看到两篇文章,讲解 为什么web开发启用jsp,确实挺有道理,整理 ...