点击复制内容到剪切板(clipboard)
clipboard官方文档:https://clipboardjs.com/
安装:
1、用npm:npm install clipboard --save
2、下载:https://github.com/zenorocha/clipboard.js/archive/master.zip
使用:
1、从其他组件上复制内容:
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git"> <!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
2、剪切其他组建上的内容:
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea> <!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
3、复制自身组建上的内容:
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
事件:
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);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
点击复制内容到剪切板(clipboard)的更多相关文章
- JS禁止右键查看源码,禁止复制,复制内容到剪切板
有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
- js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...
- js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器
Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...
- js复制内容到剪切板
注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点 这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...
- 手机端点击复制链接到剪切板(以及PC端)
一直在找如何能点击按钮将一串字符串放到手机的剪切板上,但是可能是因为搜索的关键字不对,一直无果. 向同事请教了一下,给了一个clickboard.js的插件.开始试验的时候,使用手机自带浏览器进行测试 ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- 在多浏览器使用JS复制内容到剪切板,无需插件
最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...
- 原生js 复制内容到剪切板
代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...
随机推荐
- nginx基于目录的映射:
nginx基于目录的映射: location /wxchat/ { #proxy_redirect off; proxy_set_header Host $host; proxy_set_header ...
- 分布式超级账本Hyperledger为什么选择使用kafka引擎实现共识方案
使用kafka集群配置的原因也很简单,为orderer共识及排序服务提供足够的容错空间,当我们向peer节点提交Transaction的时候,peer节点会得到或返回(基于SDK)一个读写集结果,该结 ...
- MySQL 快速构造一亿条记录的表
在上一次朋友问我如何快速构造一亿条记录的表后,我理出了实行的办法,见:http://blog.csdn.net/mchdba/article/details/52938114,但是因为录入一亿表需要2 ...
- GTID的相关特性
配置MySQL GTID 主从复制 基于mysqldump搭建gtid主从 二.GTID如何跳过事务冲突 1 2 3 4 5 6 7 8 9 10 11 很多无法预料的情形导致mysql主从发生事务冲 ...
- Debian下Netbeans编辑器字体锯齿现象
第一步:到你netbeans安装目录下的etc目录下,找到netbeans.conf文件,打开准备编辑:第二步:在netbeans_default_options后面加上-J-Dawt.useSyst ...
- webservice的model层命名空间不同的问题
[XmlType(Namespace = "http://tempuri.org/MyClass4")] [XmlRoot(Namespace = "ht ...
- spring boot 热更新配置
maven添加 spring-boot-devtools 允许自动构建 设置里面,搜索compiler,在Build,Execution,Deployment里面勾选Build project aut ...
- CAD 中绘制点
首先开启点样式,否则点是看不到的 系统变量 PDMODE 和 PDSIZE 控制点对象的显示外观. PDMODE 取值为 0.2.3 .4 时指定表示点的图形,取值为 1 表示不显示任何图形,如下图所 ...
- 饿了么移动APP的架构演进
1MVC 我们常说,脱离业务谈架构就是纯粹的耍流氓.饿了么移动APP的发展也是其业务发展的一面镜子. 在饿了么业务发展的早期,移动APP经历了从无到有的阶段.为了快速上线抢占市场,传统移动APP开发的 ...
- Android adb logcat输出日志显示不全解决方案
在终端中使用adb logcat打印服务器json数据,如果返回数据过大超过4000字节(4K)即会截断不显示 原因:logcat在对于message的内存分配大概是4k左右.所以超过的内容都直接被丢 ...