[javascript]复制到剪切板
<!-- 一个简单的小栗子 -->
<button class="copy-link"
data-fulllink="要被复制的内容在这里~">复制链接</button>
<!-- 空白节点,缓存数据,尽量使用下面的样式将该节点隐藏起来 -->
<div class="copy-area"></div>
<style>
.copy-area {
position: absolute;
z-index: -1;
width: 0;
height: 0;
opacity: 0;
}
</style>
<script>
function copyLink(event) {
let target = event.target;
let fullLink = target.getAttribute('data-fulllink');
// 在页面上建一个空白节点,用来缓存要被复制的数据
let copyNode = document.querySelector('.copy-area');
let range = document.createRange();
let selection = window.getSelection();
copyNode.innerHTML = fullLink;
range.selectNode(copyNode);
// 去除默认的选区对象
if (selection.rangeCount > 0) {
selection.removeAllRanges();
}
selection.addRange(range);
document.execCommand('copy');
target.innerHTML = '复制成功';
}
document.querySelector('.copy-link').onclick = copyLink;
</script>
[javascript]复制到剪切板的更多相关文章
- 复制到剪切板js代码(转)
<script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...
- Flash10下复制到剪切板的一种新方法
web开发中常常要实现“复制到剪切板”功能.这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了.Firefox默认下不能直接通过Javascript操作剪切板,必须开启相 ...
- jquery实现点击复制到剪切板
1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...
- ZeroClipboard插件——复制到剪切板
ZeroClipboard是一个轻量级的jQuery“复制到剪贴板”插件采用了时下流行的零剪贴板库.官网:http://www.steamdev.com/zclip 参数及默认值path(必选) Z ...
- ZeroClipboard插件,复制到剪切板
发现一个复制到剪切板的插件:ZeroClipboard插件.挺好用,用法如下: 头部引用: <script type="text/javascript" src=" ...
- web复制到剪切板js
web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...
- js-将文本复制到剪切板
// 将文本复制到剪切板 var clipboard2 = new ClipboardJS('.add_wx_guide_float', { text: function(trigger) { ret ...
- 原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板
原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板 一.主要实现以下功能:1.用鼠标选择单元格(可谓连续单元格,也可为不连续的)后,按照要求格式“证件号码:+选定内容+“,”+”选定内 ...
- zclip复制到剪切板插件有个bug
今天发现zclip复制到剪切板插件有个bug,就是在遨游和360浏览器的兼容模式下,点击复制没响应,后来我看了页面代码,发现在这两个浏览器的兼容模式下,生成的是<object>,其他浏览器 ...
随机推荐
- Permission denied: mod_fcgid
[Tue Jun 16 13:29:08 2015] [warn] (13)Permission denied: mod_fcgid: spawn process /var/www/cgi-bin/g ...
- hdu5616 暴力枚举
2017-08-25 20:08:54 writer:pprp 题目简述: • HDU 5616• n个砝码,可以放在天平左右两侧或不放• m次询问,每次询问是否可以测出给定重量• 1 ≤ n ≤ 2 ...
- consul 小結
Consul Config 使用Git做版本控制的实现 https://segmentfault.com/a/1190000013807641 服务发现 - consul 的介绍.部署和使用 http ...
- .Net遍历窗体上控件
实现遍历窗体上的控件以及找出TextBox控件,代码如下: foreach( Control control in this.Controls ) { if( control is TextBox ) ...
- Office.资料
1.JAVA+JS如何在HTML页面上显示WORD文档内容?ActiveX只能兼容IE不考虑!_百度知道.html(https://zhidao.baidu.com/question/74594982 ...
- Spring ApplicationListener 理解
在开发时有时候需要在整个应用开始运行时执行一些特定代码,比如初始化环境,准备测试数据.加载一些数据到内存等等. 在spring中可以通过ApplicationListener来实现相关的功能,加载完成 ...
- 转载:Mongodb start
Mongodb 操作 Start MongoDB The MongoDB instance stores its data files in the /var/lib/mongo and its lo ...
- 括号匹配——nyoj2
感觉自己的逻辑就像屎一样,这么简单的题目写了2个小时,以后写题还是要在纸上先列好提纲,不然如果你直接上机,遇到n多个bug的时候,容易迷失自我,去拆东补西的修bug而忽视了整片代码的逻辑的正确性. 在 ...
- js获取显示器、页面等高度 (转)
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...
- Java进阶7 并发优化2 并行程序设计模式
Java进阶7 并发优化2 并行程序设计模式20131114 1.Master-worker模式 前面讲解了Future模式,并且使用了简单的FutureTask来实现并发中的Future模式.下面介 ...