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. 微慕-专业WordPress微信小程序

    2018年9月,微慕小程序(以下简称微慕版)发布以来,一直想写一篇详细详细的说明文字,全面解读这套专业的WordPress小程序.昨天,又上线了一个稳定版本后,我才下决心,也更有信心,写点文字,向你推 ...

  2. 0008 合并K个排序链表

    合并 k 个排序链表,返回合并后的排序链表.请分析和描述算法的复杂度. 示例: 输入: [   1->4->5,   1->3->4,   2->6 ] 输出: 1-&g ...

  3. java+Selenium+TestNg搭建自动化测试架构(2)实现跨浏览器功能

    1.切换浏览器类:其中包含了切换浏览器的方法,以及关闭浏览器,设置等待时间,以及重写的断言方法 package com.rrx.framework; import java.io.IOExceptio ...

  4. Day74

    Django框架之视图函数(day74)一 作业相关 urlpatterns = [   url(r'^$',views.book),  #根路径,响应到指定视图函数:   .....   url(r ...

  5. mysql组复制安装

    参考文档 https://blog.csdn.net/li123128/article/details/80744568 https://www.cnblogs.com/ctulzq/p/863109 ...

  6. Sublime Text3使用Package Control 报错There Are No Packages Available For Installation

    转 http://blog.csdn.net/feilong_csdn/article/details/67638660 在使用sublime时,有时候我们希望将代码复制出来后仍然是高亮显示,这样我们 ...

  7. js 向上、向下取整

    // 1.只保留整数部分(丢弃小数部分) parseInt(5.1234);// 5// 2.向下取整(<= 该数值的最大整数)和parseInt()一样Math.floor(5.1234);/ ...

  8. vue每次修改刷新当前子组件

    刚入门vue,发现很多坑,对很多框架兼容性不太友好,比如layui等 每次删除相关信息,更新相关信息,不会主动刷新当前页面内容,只能手动刷新 第一步,我们在跟组件理由设置一个参数,用来判断是否需要刷新 ...

  9. 分布式之redis核心知识盘点?

    考虑到绝大部分写业务的程序员,在实际开发中使用redis的时候,只会setvalue和getvalue两个操作,对redis整体缺乏一个认知.又恰逢博主某个同事下周要去培训redis,所以博主斗胆以r ...

  10. 序列号多个input输入demo

    <input class="inputs" type="text" maxlength="4" /> <input cla ...