复制粘贴插件(不包含 Flash)——clipboard.js
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的更多相关文章
- ClipboardJS复制粘贴插件的使用
1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...
- jquery复制值到剪切板(clipboard.js)
引入一个clipboard.js文件即可使用,下载地址:https://github.com/zenorocha/clipboard.js <script type="text/jav ...
- ZeroClipBoard 复制粘贴插件
ZeroClipboard 1. 引用js 1 <script type="text/javascript" src="/ZeroClipboard.js&q ...
- Clipboard.js – 现代方式实现复制文本到剪贴板
复制文本到剪贴板应该并不难,目前已经有很成熟的 Flash 方法.但是 Flash 已经在很多场合不适用了,特别是随着 HTML5 技术的发展.今天推荐的这个 Clipboard.js 库不依赖 Fl ...
- 用clipboard.js实现纯JS复制文本到剪切板
以前很多人都是用ZeroClipboard.js来实现网页复制内容,火端也是用它.ZeroClipboard是利用flash来实现的,ZeroClipboard兼容性很好,但是由于现在越来越多的浏览器 ...
- 复制粘贴之插件(clipboard.min.js)不需要安装flash
<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...
- h5微信浏览器复制粘贴--ios兼容问题的解决方法(clipboard.js插件)
前段时间在做微信h5的时候,遇到了ios兼容,使用clipboard.js插件完美解决 下载地址:下载地址: https://github.com/zenorocha/clipboard.js cnd ...
- js实现剪切、复制、粘贴——clipBoard.js
摘要: 最近项目上要实现一个点击按钮复制链接的功能,刚开始查找了一些资料,找了几款插件,ZeroClipboard是通过flash实现的复制功能,随着越来越多的提议废除flash,于是就想能不能通过j ...
- 让微信内置浏览器兼容clipboard.js 复制粘贴 ios 安卓
<!--js copy事件--><script type="text/javascript" src="/static/js/clipboard.min ...
随机推荐
- Docker使用Link与newwork在容器之间建立连接
一,使用 --link容器互联 docker 默认使允许container 互通的(通过-icc=false 关闭互通)同一个宿主机上的多个docker容器之间如果想进行通信,可以通过使用容器的ip地 ...
- 2019年1月16日22:50:28 白糖SR1905
很好的机会,只拿了点皮毛,如果说都是因为上班时间不充裕那是给自己找借口,最主要原因没别的:思维不清,策略不明- 这里的入场初衷是周线区间下沿,日线向下脱离中枢失败后回拉一笔,那么这一单的做法就应该很明 ...
- Redis深入学习笔记(二)client list 命令详解
Redis的client list 命令可以获取当前连接到redis server端的所有客户端以及相关状态,本篇主要介绍每一个参数的作用. clisnt list 命令输出结果如下: (1)标识:i ...
- codeblock 生成和使用makefile
下载cbp2make 文件名:cbp2make-stl-rev138.tar.gz 里面有个cbp文件用codeblock打开,编译,生成的bin目录下有个执行文件. 使用命令生成Makefile . ...
- 让WebStrom支持SSH协议的子项目
让WebStrom支持SSH协议的子项目 在大项目中, 经常会遇到子项目(submodule)使用ssh的情形, 但是WebStrom不直接支持它. 下面以MAC为例,在PC中的处理类似. 打开ter ...
- sql语句的优先级
SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...
- spring命名空间
作为一名入门级菜鸟的我,在刚开始学spring框架的时候,对于命名空间不是很理解,只是在跟着老师敲代码.随着后来学习的深入,慢慢了解到命名空间的意义.如果你没有引入相应的命名空间,就不能引用相应的标签 ...
- 44_redux_comment应用_redux版本_同步功能
项目结构: components里面的东西没变,将app.jsx移动至containers中 /* * 包含所有action的type名称常量 * */ //添加评论 export const ADD ...
- python之路:列表及元组之定义
python开发之路:列表及元组之定义 列表是以后用处较大的一个数据类型,这种数据类型可以存储按组分类的信息.好了,我不多说,开始讲了! 好了,现在我有个情景,我要存东汉时期(韩国,秦国,……)所 ...
- 如何清空css 的默认边距
在网页开发中,html的元素,有部分元素默认是有内外边距的,例如body 元素,是有默认边距的 所以在通常情况下,我们都要先清空元素的内外边距:使用通配符选择器* 清空元素的内边距和外边距 ;; } ...