[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>,其他浏览器 ...
随机推荐
- codeforce 35C fire again
2017-08-25 17:04:07 writer:pprp 题目描述: • Codeforces 35C Fire Again• N*M的格子,最开始有K个点 (坐标给定) 开始着火• 每一秒着火 ...
- java代码实现JVM栈溢出,堆溢出
参考博客:http://www.cnblogs.com/tv151579/p/3647238.html 背景知识: 栈存放什么:栈存储运行时声明的变量——对象引用(或基础类型, primitive)内 ...
- [小问题笔记(五)] 用SQL加密字符串(MD5、SHA1),顺便解决读取数据加密后不一样的问题
这里用到SQL Server内置的函数 HashBytes(). select HashBytes('MD5','bubu') select HashBytes('SHA1','bubu') 以MD5 ...
- 从U盘安装linux(前人踩坑后人乘凉)
今天踩了一个大坑,网上的教程从u盘安装linux少了一个关键步骤导致我挣扎了两个小时 废话不多说,开始需要准备一些东西 1.从官网下载一个Ubuntu 10.04的镜像 2.一个大于等于1G的支持启动 ...
- C# 自动触发鼠标、键盘事件
要在C#程序中触发鼠标.键盘事件必须要调用windows函数. 一.鼠标事件的触发 1.引用windows函数mouse_event /// <summary> /// 鼠标事件 /// ...
- [java]Stream API——collect、reduce、orElse(x)
一.collect 1.R collect(Supplier supplier, BiConsumer accumulator, BiConsumer combiner) supplier:一个能创造 ...
- fstat
相关函数:stat, lstat, chmod, chown, readlink, utime 头文件:#include <sys/stat.h> #include <unistd. ...
- javascript 关键词 new都做了写什么
翻译自stackoverflow:http://stackoverflow.com/questions/1646698/what-is-the-new-keyword-in-javascript ne ...
- Linux命令详解-pwd
Linux中用 pwd 命令来查看"当前工作目录"的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文 ...
- 明明白白AOP
引子: AOP(面向方面编程:Aspect Oriented Programing)和IoC一样是Spring容器的内核,声明式事务的功能在此基础上开花结果.但是AOP和OOP差别较大,要很好地理解这 ...