<!-- 一个简单的小栗子 -->
<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. mp4格式的视频,编码方式mpeg4,转化为h264

    知识点:在使用vcastr3.swf播放器播放flv视频,(同时在html5页面,使用<video>标签时),发现某些MP4格式的代码不能播放 原因:vcastr3.swf和video,不 ...

  2. 第十一篇:Spark SQL 源码分析之 External DataSource外部数据源

    上周Spark1.2刚发布,周末在家没事,把这个特性给了解一下,顺便分析下源码,看一看这个特性是如何设计及实现的. /** Spark SQL源码分析系列文章*/ (Ps: External Data ...

  3. HDU 3639 Hawk-and-Chicken(强连通缩点+反向建图)

    http://acm.hdu.edu.cn/showproblem.php?pid=3639 题意: 有一群孩子正在玩老鹰抓小鸡,由于想当老鹰的人不少,孩子们通过投票的方式产生,但是投票有这么一条规则 ...

  4. hiho#1080 更为复杂的买卖房屋姿势 线段树+区间更新

    #1080 : 更为复杂的买卖房屋姿势 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho都是游戏迷,“模拟都市”是他们非常喜欢的一个游戏,在这个游戏里面他们 ...

  5. DataTable 操作

    public void CreateTable() { //创建表 DataTable dt = new DataTable(); //1.添加列 dt.Columns.Add("Name& ...

  6. 解决docker中使用nginx做负载均衡时并发过高时的一些问题

    # 解决docker中使用nginx做负载均衡时并发过高时的一些问题 1.问题产生原因: 由于通过nginx作为负载均衡服务,在访问并发数量达到一定量级时jmeter报错. nginx日志关键信息:a ...

  7. HDU 4750 Count The Pairs ★(图+并查集+树状数组)

    题意 给定一个无向图(N<=10000, E<=500000),定义f[s,t]表示从s到t经过的每条路径中最长的边的最小值.Q个询问,每个询问一个t,问有多少对(s, t)使得f[s, ...

  8. CentOS 6.3从自带的Pyhon版本

    本文介绍CentOS 6.3从自带的Pyhon版本是2.6升级到2.7.6的方法. 因为CentOS系统中旧版本的Python已被深度依赖,所以不能卸载原有的Python,只能全新安装. 1.下载Py ...

  9. Markdown_01_基础语法

    目录 概览 一.区块元素{#BlockElement} 1.段落和换行 2.标题 2.区块引用 2.1 在每行的最前面加上 > 2.2 只在整个段落的第一行最前面加上> 2.3 区块引用可 ...

  10. Unix系统中system函数的返回值

    网上关于system函数的返回值说明很多很详细但却不直观,这里搬出apue 3rd Editon中实现system函数的代码来说明其返回值. #include <sys/wait.h> # ...