前端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 ...
随机推荐
- Qt Creator开发的程序提升到管理员权限运行
一些功能需要管理员权限,例如启动一个服务,这就需要exe在管理员权限下运行,一个方法是在exe上右键,选择“以管理员身份运行”,或者右键-属性-兼容性-勾选“以管理员身份运行此程序” 另一个方法是在程 ...
- cocos2dx热更新tmx的一个坑
游戏项目中使用了tmx地图,当对tmx文件进行热更新时,进入该地图总是宕机,纠结了几小时终于发现,cocos读取tmx文件时,会默认tmx关联的图集文件和tmx在同一目录,然而那个图集文件并没有在热更 ...
- My97DatePicker设置，包括隐藏 清空，设置最大日期等 转载
My97DatePicker是一款非常灵活好用的日期控件.使用非常简单. 1.下载My97DatePicker组件包 2.在页面中引入该组件js文件: <script type=&quo ...
- 打包签名时出现Conversion to Dalvik format failed with error 1
今天在导出签名APK时,居然出现了“Conversion to Dalvik format failed with error 1” 于是,我习惯性地“Project”->“Clean”,把工程 ...
- android how to deal with data when listview refresh
如何解决listview数据刷新,下拉刷新,上拉加载更多时,图片不闪烁. 在Activity的onResume()方法中将adaper和listView重新再绑定一次. listView.setAda ...
- 解决SecureCRT连接linux终端中文显示乱码
现象如下: 原因: SecureCRT的字符集编码不是Linux的默认编码:UTF-8 解决办法: 1.在“选项”找到“会话选项” 2.选择“外观”,设置字符编码为“UTF-8” 3.确定后,继续在终 ...
- 在Ubuntu上搭建hive环境
一.准备软件 二.安装虚拟机 1.新建虚拟机向导 2.安装客户机操作系统 3.用户名密码设置 4.设置虚拟机名称和保存位置 5.处理器设置 6.设置虚拟机内存 7.然后一直next下去(有的根据自己的 ...
- No Feign Client for loadBalancing defined. Did you forget to include spring-cloud-starter-netflix-ribbon?
... 60 common frames omittedCaused by: java.lang.IllegalStateException: No Feign Client for loadBala ...
- mysql数据库默认编码配置
修改my.ini文件 以下添加[mysql] default-character-set=utf8[mysqld] character_set_server = utf8init_connect='S ...
- 草莓糖CMT依旧强势，数字货币量化分析[2018-05-29]
[分析时间]2018-05-29 17:45 [报告内容]1 BTC中期 MA 空头排列中长 MA 空头排列长期 MA 空头排列 2 LTC中期 MA 空头排列中长 ...