[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>,其他浏览器 ...
随机推荐
- 51 Nod 1091 线段的重叠
2017-09-24 19:51:41 writer:pprp 上一个题目就是关于线段重叠最大值,这个是找区间最长重合? 给你n个线段,然后让你在其中选择两条,使两条尽可能重合多一点 解决方法; 1. ...
- php调用mysql存储过程
MYSQL存储过程 原文链接:http://blog.sina.com.cn/s/blog_52d20fbf0100ofd5.html 一.存储过程简介(mysql5.0以上支持) 我们常用的操作数据 ...
- 【转】Java运行时数据区简介及堆与栈的区别
理解JVM运行时的数据区是Java编程中的进阶部分.我们在开发中都遇到过一个很头疼的问题就是OutOfMemoryError(内存溢出错误),但是如果我们了解JVM的内部实现和其运行时的数据区的工作机 ...
- mysql的基本的数据库的查询
学习一个数据库我们要学习哪些东西: sql数据库的话, curd. 对于查询,要注意表的关联的查询. 索引,触发器,对于控制连接量,脚本, 数据库的可视化工具,权限管理. http://www.360 ...
- nginx页面不能正常访问排除方法
nginx页面不能访问 nginx页面不能访问 检查服务端服务是否启动成功 在服务端使用wget和curl测试下返回的是否正常 浏览器wget或者curl等软件访问不了Ngixn页面 1. 检查服务端 ...
- Android6.0------权限管理
此博客主要谈谈Android6.0的权限,关于其他6.0的知识 请看https://developer.android.com/about/versions/marshmallow/android-6 ...
- 新旧版ubuntu镜像免费下载
链接:https://pan.baidu.com/s/1hUNfiyA_Npj9QQ0vNLJ_Xw 密码:6k6i
- proxy-target-class 作用
该属性值默认为false,表示使用JDK动态代理织入增强;当值为true时,表示使用CGLib动态代理织入增强;但是,即使设置为false,如果目标类没有生命接口, 则Spring将自动使用CGLib ...
- centos7&redhat 之 firewalld 详细介绍配置
firewalld和iptables的关系 firewalld自身并不具备防火墙的功能,而是和iptables一样需要通过内核的netfilter来实现,也就是说firewalld和iptables一 ...
- 应用性能管理工具PinPoint介绍
概述: 下面介绍一个开源的 APM (Application Performance Management/应用性能管理)工具 - Pinpoint.一个分布式事务跟踪系统的平台,思路基于google ...