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

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

 你需要通过传入一个DOM 选择器HTML 元素, 或者 HTML 元素数组作为参数,来实例化对象。

new ClipboardJS('.btn');//复制按钮的class或者id或者...

 data-clipboard-action这个属性有两个值:data-clipboard-action="cut"(剪切)和data-clipboard-action="copy"(复制),默认是复制
 使用demo:

js部分:
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) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
  alert('复制失败!');
}); 
复制
htnl部分:
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" readonly /> //用disabled的话,就不能复制了,因为disabled禁止选中
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">复制</button>
剪切
htnl部分:
<!-- Target -->
<input id="foo1" value="https://github.com/zenorocha/clipboard.js.git" readonly /> //用disabled的话,就不能剪切了,因为disabled禁止选中
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#foo1">剪切</button>

复制粘贴插件(不包含 Flash)——clipboard.js的更多相关文章

  1. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...

  2. jquery复制值到剪切板(clipboard.js)

    引入一个clipboard.js文件即可使用,下载地址:https://github.com/zenorocha/clipboard.js <script type="text/jav ...

  3. ZeroClipBoard 复制粘贴插件

    ZeroClipboard 1.    引用js 1 <script type="text/javascript" src="/ZeroClipboard.js&q ...

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

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

  5. 用clipboard.js实现纯JS复制文本到剪切板

    以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...

  6. 复制粘贴之插件(clipboard.min.js)不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

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

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

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

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

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

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

随机推荐

  1. iptables的MAC地址过滤

    这里(http://en.wikipedia.org/wiki/Mac_address)有关于MAC地址的一些信息.  查询现有设置 iptables -S [chain] 比如:针对1中所设 inp ...

  2. S2-052 RCE漏洞 初步分析

    PS:初步分析,只是分析了Struts2 REST插件的部分,本来菜的抠脚不敢发,但看到各大中心发的也没比我高到哪里去,索性发出来做个记事! 漏洞描述 2017年9月5日,Apache Struts发 ...

  3. MySQL5.7.17解压版安装

    首先将mysql解压,公司的mysql解压后自带my.ini文件,结构如下: 在my.ini文件中配置的data路径在my文件夹下,需要删掉,然后修改my.ini文件中basedir和datadir路 ...

  4. MemCache在网站中的使用

    MemCache安装好后,网站一直没法使用,后来查找资料,发现需要在配置文件里写几行代码,如下所示 <enyim.com> <memcached protocol="Tex ...

  5. solidworks的工程图模板文件和图纸格式文件

    工程图模板文件:drwdot,这个文件是在新建工程图的时候,可以选择的,如下. 图纸格式文件:slddrt,这个文件是进入工程图环境,编辑[图纸属性]的时候,可以选择的.如下. 怎么定制上述两种文件? ...

  6. 调试dump文件

    1.设置好pdb文件和源代码路径 为了能正确分析Dump文件,我们必须要指定和程序一起出来的PDB文件,如果程序重新被编译了一次,即使代码没有任何变化,之前的PDB文件我们不能再继续使用.

  7. uva-507

    题意:连续序列和最大,直接枚举..... 代码跑了2.4s.QAQ #include <string> #include<iostream> #include<map&g ...

  8. thinkphp3.2.3集成腾讯云短信文档流程

    昨天晚上折腾了一个小时没解决 今天折腾了20分钟就搞定了 看了thinkphp3.2.3的命名空间解释方法  把文件放到这里 /ThinkPHP/Library/Org/ 把新建了一个Sms文件夹 把 ...

  9. swing 嵌入浏览器

    需求要在swing加一个浏览器,在网上找了一个挺方便的方法,现在把代码贴上来 力求方便. package com.vtradex.page.shipment; import static javafx ...

  10. 盘点一下Github上开源的Java面试/学习相关的仓库,看完弄懂薪资至少增加10k

    最近浏览 Github ,收藏了一些还算不错的 Java面试/学习相关的仓库,分享给大家,希望对你有帮助.我暂且按照目前的 Star 数量来排序. 本文由 SnailClimb 整理,如需转载请联系作 ...