<!-- 一个简单的小栗子 -->
<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]复制到剪切板的更多相关文章

  1. 复制到剪切板js代码(转)

    <script type="text/javascript" language="javascript"> //复制到剪切板js代码 functio ...

  2. Flash10下复制到剪切板的一种新方法

    web开发中常常要实现“复制到剪切板”功能.这个功能很实用,但是由于安全问题,浏览器的限制越来越严,实现的方法也越来越有限了.Firefox默认下不能直接通过Javascript操作剪切板,必须开启相 ...

  3. jquery实现点击复制到剪切板

    1.必须有先引入 jquery库 <script type="text/javascript" src="js/jquery.js"></sc ...

  4. ZeroClipboard插件——复制到剪切板

    ZeroClipboard是一个轻量级的jQuery“复制到剪贴板”插件采用了时下流行的零剪贴板库.官网:http://www.steamdev.com/zclip 参数及默认值path(必选)  Z ...

  5. ZeroClipboard插件,复制到剪切板

    发现一个复制到剪切板的插件:ZeroClipboard插件.挺好用,用法如下: 头部引用: <script type="text/javascript" src=" ...

  6. web复制到剪切板js

    web复制到剪切板 clipboard.js 好使!开源项目,下载地址: https://github.com/zenorocha/clipboard.js 使用方法: 引入 clipboard.mi ...

  7. js-将文本复制到剪切板

    // 将文本复制到剪切板 var clipboard2 = new ClipboardJS('.add_wx_guide_float', { text: function(trigger) { ret ...

  8. 原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板

    原创:用VBA实现将鼠标选择的单元格按照指定格式合并并复制到剪切板 一.主要实现以下功能:1.用鼠标选择单元格(可谓连续单元格,也可为不连续的)后,按照要求格式“证件号码:+选定内容+“,”+”选定内 ...

  9. zclip复制到剪切板插件有个bug

    今天发现zclip复制到剪切板插件有个bug,就是在遨游和360浏览器的兼容模式下,点击复制没响应,后来我看了页面代码,发现在这两个浏览器的兼容模式下,生成的是<object>,其他浏览器 ...

随机推荐

  1. cmd中如何查看环境变量

    查看所有环境变量 set 查看某一个环境变量 C:\WINDOWS\system32>set no_proxyNO_PROXY=localhost,127.0.0.1,172.31.212.14 ...

  2. 分布式文档存储数据库(MongoDB)副本集配置

    副本集特征: N 个节点的集群 任何节点可作为主节点 所有写入操作都在主节点上 自动故障转移 自动恢复 相关文章: http://www.cnblogs.com/huangxincheng/archi ...

  3. 纯js提交get和post请求

    get function get(URL, PARAMS) { var temp = document.createElement("form"); temp.method = & ...

  4. Google Java编程风格指南中文版(转)

    作者:Hawstein出处:http://hawstein.com/posts/google-java-style.html声明:本文采用以下协议进行授权: 自由转载-非商用-非衍生-保持署名|Cre ...

  5. Python模块学习之解决selenium的“can't access dead object”错误

    问题描述 在python执行过程中,提示selenium.common.exceptions.WebDriverException: Message: TypeError: can't access ...

  6. PHP 重载方法 __call()

    __call() 方法用于监视错误的方法调用. __call()(Method overloading) 为了避免当调用的方法不存在时产生错误,可以使用 __call() 方法来避免.该方法在调用的方 ...

  7. StringUtils.isNumeric()的特殊点

    String str = "-1"; StringUtils.isNumeric(str) 返回的是false StringUtils.isNumeric()方法在判断字符串是否是 ...

  8. 1029: [JSOI2007]建筑抢修 贪心

    https://www.lydsy.com/JudgeOnline/problem.php?id=1029 题意:n个建筑,每个有修复时间和爆炸时间,没有在爆炸时间内修复就会爆炸,问最多能修复的建筑 ...

  9. LabVIEW之安装队列工具包AMC安装问题解决

    LabVIEW之安装队列工具包AMC安装问题解决--VIPM无法连接LabVIEW 彭会锋 参考资料: http://www.labviewpro.net/forum_post_detail.php? ...

  10. Nginx启动/重启失败

    解决方案: Nginx启动或重启失败,一般是因为配置文件出错了,我们可以使用nginx -t方法查看配置文件出错的地方.也可以通过查看Nginx日志文件定位到Nginx重启失败的原因,Nginx日志文 ...