[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>,其他浏览器 ...
随机推荐
- SEM关键词的三种分类方式
关键词分类是为了使sem账户搭建结构清晰便于管理关键词.基于对需求人群的深入分析,每个账户都有其独特的分类方式,比如招商加盟行业更多的是地域分类,品牌类企业通常用词性分类即可,而冷门行业用人群分类比较 ...
- org.springframework.dao.DuplicateKeyException: a different object with the same identifier value was
在使用hibernate框架里面的:saveOrUpdate报错: 意思就是另一个对象的id(id同值)已经被session关联了. 原因分析: 在第1步中中通过titleList.get(0)获取一 ...
- sleep(),wait(),yield()和join()方法的区别
sleep() sleep()方法需要指定等待的时间,它可以让当前正在执行的线程在指定的时间内暂停执行,进入阻塞状态,该方法既可以让其他同优先级或者高优先级 的线程得到执行的机会,也可以让低优先级的线 ...
- ReverseLinkedList,ReverseLinkedList2,链表反转问题
ReverseLinkedList: public class ReverseLinkedList { public ListNode reverseList(ListNode head) { if( ...
- hadoop2.6.0集群配置
1.修改机器名 集群的搭建最少需要三个节点,机器名分别修改为master,slave1,slave2.其中以master为主要操作系统. 修改hostname: sudo gedit /etc/hos ...
- kindeditor支持flv视频播放方法
打开plugins\media下面的media.js,打开,找到下面的代码: var html = K.mediaImg(self.themesPath + ‘common/blank.gif’, { ...
- hdu4305生成树计数
先预处理出距离,然后判断是否可行,要注意判断是否在一条直线上时判断是在两侧还是一边(wa了四次) double型数据 #include<map> #include<set> # ...
- program发展史及以后预测
三个阶段:第一个阶段是1950年代到1960年代,是程序设计阶段,基本是个体手工劳动的生产方式.这个时期,一个程序是为一个特定的目的而编制的,软件的通用性是很有限的,软件往往带有强烈的个人色彩.早期的 ...
- day31 堡垒机尾声 + Python与金融量化分析(一)
堡垒机尾声: 代码案例:https://github.com/liyongsan/git_class/tree/master/day31 课堂笔记:file send: 1.选择本地文件 2.远程路径 ...
- HighCharts 特性;Highcharts 环境配置
Highcharts Highcharts 是一个用纯JavaScript编写的一个图表库. Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表 Highchart ...