[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>,其他浏览器 ...
随机推荐
- 【cs231n】最优化笔记
): W = np.random.randn(10, 3073) * 0.0001 # generate random parameters loss = L(X_train, Y_train, W) ...
- Javascript实用技巧
1. 给参数赋默认值 //通常写法 function dateRender(format){ if(format){ format = 'Y-m-d'; } // code } //强推 functi ...
- GridControl 史上最全的资料(一)
GridControl详解(一)原汁原味的表格展示 Dev控件中的表格控件GridControl控件非常强大.不过,一些细枝末节的地方有时候用起来不好找挺讨厌的.使用过程中,多半借助Demo和英文帮助 ...
- Unity与Web结合
偶然在论坛上看到了一篇文章,觉的挺有意思,转载一下,之前做游戏,现在做前端,这篇文章不错..转载 Unity WebPlayer 写在前面 最近在做unity与web之间通讯的项目,在网上搜索了一些资 ...
- springboot项目属性配置及注意事项
在idea编辑器建的springboot项目中的resources包下的application.properties这个就是配置文件. 另外配置文件的文件名还可以是application.yml,在r ...
- 分布式系统理论:一致性协议Paxos
Paxos算法是莱斯利·兰伯特(Leslie Lamport)于1990年提出的一种基于消息传递的一致性算法. Paxos 算法是一个解决分布式系统中,多个节点之间就某个值(注意是某一个值,不是一系列 ...
- ajax实现用户注册
需求分析 页面中给出注册表单: 在username input标签中绑定onblur事件处理函数. 当input标签失去焦点后获取 username表单字段的值,向服务端发送AJAX请求: djang ...
- JAVA8新特性简单总结
速度更快代码更少强大的StreamAPI便于并行最大化的减少空指针异常Lambda表达式<具体做什么事>和函数式接口Lambda表达式(也叫做闭包)它允许我们将一个函数当作方法的参数(传递 ...
- 用Qt写了一个qq客户端,采用webqq协议,发出来和大家分享一下---大神请无视
首先做以下声明: 本程序基于腾讯公司的webqq协议开发,所有相关版权归腾讯公司所有.此程序只用于技术交流和学习,不得用于其他方面. ---开发者:雨后星辰,转载请注明出处:http://www.cn ...
- java和python互相调用
java和python互相调用 作者:xuaijun 日期:2017.1.1 python作为一种脚本语言,大量用于测试用例和测试代码的编写,尤其适用于交互式业务场景.实际应用中,很多网管系统 ...