复制粘贴插件(不包含 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 ...
随机推荐
- 样式初始化(copy)
css样式初始化reset文件 pc端 移动端 公共样式 1.pc端 /* normalize.css */ html { line-height: 1.15; /* 1 */ -ms-text-si ...
- struct 对齐和补齐原则
// 对齐原则:每一成员需对齐为后一成员类型的倍数 // 补齐原则:最终大小补齐为成员类型最大值的倍数 struct A { int a; // 4 short b; // (4) + ...
- RN-环境配置
良好的开端是成功的一半,这是window平台安装步骤 首先配置JDK1.8 配置JAVA_HOME环境变量 然后安装Android Studio3.2 然后安装react-native-cli np ...
- Jquery取小数后边2位,N位;jQuery去掉字符串首尾空字符串
function fix(num, N) { , N); return Math.round(num * base) / base; } 实例,取小数后边两位 var yhmoney2 = fix(1 ...
- Spring声明式事务的隔离级别和传播机制
声明式事务 在Spring中,声明式事务是用事务参数来定义的.一个事务参数就是对事务策略应该如何应用到某个方法的一段描述,如下图所示一个事务参数共有5个方面组成: 传播行为 事务的第一个方面是传播行为 ...
- vs 为什么使用#include "stdafx.h"
原因:1.减少编译次数 2.减少不必要的处理 流程图: 这个跟宏定义#ifndef xx #define xx coding here #endif //xx 区别在于: 宏定义是防止头文件重复包含 ...
- 大量Python开源第三方库资源分类整理,含菜鸟教程章节级别链接
Python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明.因其具有丰富和强大的库,它常被称为胶水语言,能够把用其它语言制作的各种模块(尤其是C/C ...
- [DOM]初识DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...
- WIN下的Django安装
转自https://www.cnblogs.com/lfxiao/p/7510002.html
- idea的maven搭建
IntelliJ IDEA中创建Web聚合项目(Maven多模块项目) 在file-setting-maven中可以配置自己下载的maven,在自己下载maven目录的config下的setting. ...