点击复制内容到剪切板(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 ...
随机推荐
- java自动装箱的一个例子
Object obj = 56; int i = (Integer)obj; 第一行等价于: Object obj = Integer.valueOf(56); Integer.valueO ...
- 《Windows核心编程》第3章——深入理解handle
本文借助windbg来理解程序中的函数如何使用handle对句柄表进行查询的.所以先要开启Win7下Windbg的内和调试功能. 解决win7下内核调试的问题 win7下debug默认无法进行内核调试 ...
- 分析Ajax请求并抓取今日头条街拍美图
项目说明 本项目以今日头条为例,通过分析Ajax请求来抓取网页数据. 有些网页请求得到的HTML代码里面并没有我们在浏览器中看到的内容.这是因为这些信息是通过Ajax加载并且通过JavaScript渲 ...
- String[]字符串数组,按字典顺序排列大小
package ltb6w1; public class WordSort1 { private String[] a= {"hello","world",&q ...
- 黄聪:FFmpeg视频转码技巧之-crf参数(H.264篇)
昨天,有个朋友给我出了个难题:他手上有一个视频,1080P的,49秒,200多兆:要求在确保质量的情况下把文件压缩到10M以内. 这是什么概念呢?按照文件大小10M来计算,码率是:10 x 8 / 4 ...
- “无法获得锁 /var/lib/dpkg/lock -open (11:资源暂时不可用)”的方法
另外的ubuntu 问题 在更新的时候有时候会出现 “无法获得锁 /var/lib/dpkg/lock -open (11:资源暂时不可用)”的方法 解决办法: 在ubuntu系统的termial下, ...
- 【Darwin学习笔记】之获取系统处理器数量的方法
阅读Darwin源码的时候看到这个方法,感觉挺有用处,且考虑了多种平台下的实现方式,直接贴代码,以后说不定会用到~ 单一种平台下的实现方法可能很容易,但是把这些个系统都收集在一起,在一个函数中实现还是 ...
- java的应用包的方法,及调用类里面函数的原理
selenium官网下载的selenium包 包导入eclipse 见:https://www.cnblogs.com/kaibindirver/p/10674604.html 代码
- [转] 关于 Ceph PG
本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...
- 学习笔记之TensorFlow
TensorFlow https://www.tensorflow.org/ An open source machine learning framework for everyone Tensor ...