前端JS复制特定区域的文本(兼容safari)
html5的webAPI接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖flash。
代码如下：
/* 创建range对象 */
const range = document.createRange();
range.selectNode(element); // 设定range包含的节点对象 /* 窗口的selection对象，表示用户选择的文本 */
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges(); // 将已经包含的已选择的对象清除掉
selection.addRange(range); // 将要复制的区域的range对象添加到selection对象中 document.execCommand('copy'); // 执行copy命令，copy用户选择的文本
//兼容Pc端的safari浏览器
let node = document.getElementById('copy');//input框
node.setAttribute('value', 'hello world');
let issafariBrowser = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
if(issafariBrowser){
//safari浏览器单独处理
node.setSelectionRange(0, 9999);
}
else{
//其他浏览器
const range = document.createRange();
range.selectNode(node);
const selection = window.getSelection();
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('copy');
还有一种兼容safari和chrome浏览器的通用写法不需要判断，这种写法在demo中可以成功。
demo如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.btn{
cursor: pointer;
width: 200px;
height: 100px;
background: red;
display: inline-block;
}
</style>
<!-- <link type="text/css" rel="styleSheet" href="1.css"> -->
</head>
<body style="background: blue">
<div class="div1"> </div>
<div id="cardList">
<div class="btn" id='btn'>点击我，复制我</div>
<input id='copy'/>
</div> </body> <script>
var btn = document.querySelector('#btn');
btn.addEventListener('click',function(){ let input = document.getElementById('copy'); input.setAttribute('readonly', 'readonly');
input.setAttribute('value', 'hello world'); const range = document.createRange(); range.selectNode(input);
const selection = window.getSelection();
console.log(selection)
if(selection.rangeCount > 0) selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
})
</script> </html>
但是在react项目中，在safari浏览器中
window.getSelection();对象的anchorNode值一直为null，
所以在safari中不成功，
所以最终采用了判断是否为safari浏览器来进行不同操作的方法。
API参考：
前端JS复制特定区域的文本(兼容safari)的更多相关文章
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- javascript 实现禁止右键，复制，选取文本 (兼容firefox，IE，chrome等主流浏览器)
1. JS 禁止右键 <script type="text/javascript">document.oncontextmenu=function(e){return ...
- django 前端 js让一段文本中包含的网址可以被访问
这个功能还是挺刚需的,下面说说实现过程,用到了正则表达式. 1.原本的html部分代码: <h4 id="softadd">链接: https://pan.baidu. ...
- json处理总结(前端js和后端java)
前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...
- 【分享】JS如何为复制的Web文本添加其他信息
看到了两篇关于这题的讨论,简单的记录一下!o(*￣▽￣*)ブ 1. stackoverflow , How to add extra info to copied web text 2. 黑客派, ...
- js 复制文本的四种方式
js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...
- 简单实现兼容各大浏览器的js复制内容到剪切板
因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...
- js 复制文本到剪贴板
js 复制文本到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- Leetcode: Construct Binary Tree from Preorder and Inorder Traversal, Construct Binary Tree from Inorder and Postorder Traversal
总结: 1. 第 36 行代码, 最好是按照 len 来遍历, 而不是下标 代码: 前序中序 #include <iostream> #include <vector> usi ...
- 一个简单的ServletContextListener示例
ServletContext可以初始化String类型的参数.但是,如果你希望应用初始化参数是一个数据库DataSource呢?上下文参数只能是String.毕竟,你不能把一个Dog对象塞到XML部署 ...
- log4j2设置日志文件读写权限（filePermissions）
spring-boot使用log4j2作为日志插件的时候需要设置日志文件的读写权限,可以File 上增加filePermissions,如: <File name="File" ...
- poj_1464 动态规划
题目大意 N个节点构成一棵树形结构,在其中若干个节点上放置士兵,与被放置士兵的节点相连的边会被士兵看守.问需要至少在多少个节点上放置士兵,才能使得N-1条边都被看守. 题目分析 题目描述的结构为树形, ...
- windows10子系统配置vim
.cmd背景,字体等配置 (1)设置背景颜色44 50 59 (2)设置字体 大小 颜色 Courier New 20 白色 2.ubuntuvim配置(etc/vim/vimrc):(1)配置vim ...
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- HDU_5510_Bazinga
Bazinga Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- 1.1 - python基础语法 - 总结练习题
1.编译型与解释型语言的区别,哪些属于编译型,哪些属于解释型 编译型:c/c++/go 运行速度快,开发效率低,不可跨平台 解释型:python/java/php/ruby 运行速度低,开发效率高,可 ...
- SmokePing安装手册
SmokePing安装部署 SmokePing简介 Smokeping是一款用于网络性能监测的开源监控软件,主要用于对IDC的网络状况,网络质量,稳定性等做检测,通过rrdtool制图方式,图形化地展 ...
- python [:-1] 与 [::-1]
line = "abcde"line[:-1]结果为:'abcd' line = "abcde"line[::-1]结果为:'edcba' [:-1] b = ...