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项目发布

    一.使用eclipse把项目以war格式导出 二.把war文件放在tomcat的webapps中 三.在tomcat的conf文件夹里的server.xml进行配置: 在<Host>< ...

  2. linux进程监控和简单的重启&服务的创建 参考自http://blog.csdn.net/lockheed_hong/article/details/73549837

    脚本文件 该脚本实现了一个检测进程是否存在,不存在的情况下重启进程并且记录日志. #! /bin/sh proc_name="console/queue/gift.php" # 进 ...

  3. [转]Python中出错:ImportError: No module named win32com.client

    Python中出错:ImportError: No module named win32com.client [问题] [已解决]Python中处理操作Excel中的图表(Chart,Graph) 的 ...

  4. Windows核心编程 中部分代码 Delphi 实现

    // ① Delphi 使用 Interlocked 系列函数 var MyValue:Longint = ; // = Integer begin InterlockedIncrement(MyVa ...

  5. [Android] JNI中的Local Reference

    参考文章:<在 JNI 编程中避免内存泄漏> 一.Local Reference 深层解析 JNI Local Reference 的生命期是在 native method 的执行期(从 ...

  6. sublime 最近用的有点卡

    index_files:false,

  7. mysql 事务学习

    1.事务 逻辑上的一组操作,组成这组操作的各个逻辑单元要么一起成功,要么一起失败. 2.事务特性 原子性:强调事务的不可分割.一致性:强调的是事务的执行的前后,数据的完整性要保持一致.隔离性:一个事务 ...

  8. spring 基本配置学习

    1.bean的方式说明 作用:    用于配置对象让spring来创建的. 默认情况下它调用的是类中的无参构造函数.如果没有无参构造函数则不能创建成功. 属性: id:给对象在容器中提供一个唯一标识. ...

  9. 自动化测试Java一:Selenium入门

    From: https://blog.csdn.net/u013258415/article/details/77750214 Selenium入门 欢迎阅读Selenium入门讲义,本讲义将会重点介 ...

  10. 关于Dubbo面试问题

    一.默认使用的是什么通信框架,还有别的选择吗? 默认也推荐使用netty框架,还有mina. 二.服务调用是阻塞的吗? 默认是阻塞的,可以异步调用,没有返回值的可以这么做. 三.一般使用什么注册中心? ...