复制粘贴插件(不包含 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 ...
随机推荐
- kafka connect rest api
1. 获取 Connect Worker 信息curl -s http://127.0.0.1:8083/ | jq lenmom@M1701:~/workspace/software/kafka_2 ...
- ubuntu开机自动启动服务
编辑rc.loacl脚本 Ubuntu开机之后会执行/etc/rc.local文件中的脚本,所以我们可以直接在/etc/rc.local中添加启动脚本.当然要添加到语句:exit 0 前面才行.如: ...
- Java中的transient关键字
转载于:[lfsf802](http://blog.csdn.net/lfsf802/article/details/43239663) 关键字介绍 一个对象只要实现了Serilizable接口,这个 ...
- 使用Git将本地文件提交到远程仓库
一 操作准备条件: git远程仓库已经建好了,本地文件已经存在了,现在要将本地代码推到git远程仓库保存. 解决办法如下: 1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以 ...
- 解决导出CSV后在EXCEL打开纯数字前面0丢失问题
select ip ,concat('="',accountname,'"')select ip ,concat('="',accountname,'"')
- calc()使用用法
calc()是css3的一个新增的功能,用来指定元素的长度. 它是动态设置元素值,可由加减乘除算法得到最后计算值. 比如说“width:calc(50% + 5em)” 在使用less解析中calc运 ...
- 练习: bs4 简单爬取 + matplotlib 折线图显示 (关键词,职位数量、起薪)
要看一种技术在本地的流行程度,最简单的就是找招聘网站按关键词搜索. 比如今天查到的职位数量是vue 1296个,react 1204个,angular 721个.国际上比较流行的是react,本地市场 ...
- IntelliJ IDEA神器使用技巧 慕课
1,高效定位代码:无处不在的跳转. 项目之间的跳转(打开了多个窗口):ctrl+alt+] 或ctrl+alt+[ 查找窗口 shift+ctrl+a 输入recent file 最近打开的文件. ...
- SpringMVC参数绑定总结
springMvc作用: a) 接收请求中的参数 b) 将处理好的数据返回给页面参数绑定(就是从请求中接收参数): a) 默认支持的类型: request, response, se ...
- django用户权限操作
第一步:创建数据库和超级管理员,为了比较方便使用(里面有些的是没用的),额外新增 chioces , per_method , argument_list # 用户权限# 建立一个权限表,将映射关系存 ...