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)的更多相关文章

  1. JS禁止右键查看源码,禁止复制,复制内容到剪切板

    有时候我们希望自己的网页源码不被查看,这时需要关掉鼠标的右击事件;有时候我们也希望禁止选择页面内容Ctrl+C复制. 1.禁止右键查看源码; <script> //设置右键事件 funct ...

  2. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

  3. js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

      最近,一些项目中用到监听用户复制.剪切的操作. 案例1.在PC端,当用户获得一个京东卡的使用券,当用户使用ctrl + C复制得到的使用券时,将使用券的代号复制到粘贴板,以便于用户ctrl+v进行 ...

  4. js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

    Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<bo ...

  5. js复制内容到剪切板

    注意第一部分的内容不兼容Safari,全兼容的请使用第二部分方法 第一部分 查看demo请点  这里. 原生js复制指定内容到剪切板,超简单的实现方式, 实现思路如下: 1.创建一个input,把想要 ...

  6. 手机端点击复制链接到剪切板(以及PC端)

    一直在找如何能点击按钮将一串字符串放到手机的剪切板上,但是可能是因为搜索的关键字不对,一直无果. 向同事请教了一下,给了一个clickboard.js的插件.开始试验的时候,使用手机自带浏览器进行测试 ...

  7. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  8. 在多浏览器使用JS复制内容到剪切板,无需插件

    最近在学习DHTMLX,下载了一些JS源码,使用谷歌浏览器,在学习dhtmlxGrid部分进行复制表格内容时,发现,在线版的可以复制成功,而本地的不可以复制,报类似访问剪切板错误,经查找原因,原来是谷 ...

  9. 原生js 复制内容到剪切板

    代码: function copyHandle(content){ let copy = (e)=>{ e.preventDefault() e.clipboardData.setData('t ...

随机推荐

  1. java-shiro登录验证

    登录验证: LoginController:(LoginController.java) @ResponseBody @RequestMapping(value="/login", ...

  2. MQTT压力测试工具之JMeter插件教程

    基于Jmeter的MQTT测试插件-上 1. Jmeter插件简介 Apache JMeter是Apache组织开发的基于Java的压力测试工具.下载 用于对软件做压力测试,它最初被设计用于Web应用 ...

  3. 自定义抛出throw 对象练习

    package ltb6w; import java.util.*; public class Bank { private String select; private String select2 ...

  4. IDEA运行tomcat8.5.35源代码

    前提环境,安装和配置好java1.8+环境,maven,IDEA 1.下载Tomcat源代码:https://tomcat.apache.org/download-80.cgi#8.5.35 2.创建 ...

  5. ALGO-117_蓝桥杯_算法训练_友好数

    问题描述 有两个整数,如果每个整数的约数和(除了它本身以外)等于对方,我们就称这对数是友好的.例如: 9的约数和有:+= 4的约数和有:+= 所以9和4不是友好的. 220的约数和有: = 284的约 ...

  6. 【ActiveMQ】之安全机制(二)客户端连接安全

    配置完管控台的安全之后,我们还要配置客户端连接安全,否则大家都可以往MQ上发送消息,这样太危险! 根据官方文档,http://activemq.apache.org/security.html Act ...

  7. Ubuntu 14.10 下Spark on yarn安装

    1 服务器分布 服务器 说明 192.168.1.100 NameNode 192.168.1.101 DataNode 192.168.1.102 DataNode 2 软件环境 2.1 安装JDK ...

  8. Windows 使用windump进行循环抓包

    准备工作 1.下载tcpdump http://www.winpcap.org/windump/  2.下载WinPcaphttp://www.winpcap.org/install/bin/WinP ...

  9. webscoket通信初步(一)

    只要动手做起来,多投入时间和精力.耐心去研究,以大多人的智商加google,平时遇到的大部分问题我们都是可以自己解决的,大部分的知识我们都是可以掌握的. 我们都知道http协议是单向请求的,无法实现双 ...

  10. bzoj3815: 卡常数

    随机数据,带修改,求到空间中到给定点距离为给定值的点的编号,唯一解. 建三维kdtree,对查询用可行性剪枝在树上找,由于数据随机,插入删除时不需要维护平衡. #include<bits/std ...