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)的更多相关文章

  1. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  2. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  3. javascript 实现禁止右键，复制，选取文本 (兼容firefox，IE，chrome等主流浏览器)

    1. JS 禁止右键 <script type="text/javascript">document.oncontextmenu=function(e){return ...

  4. django 前端 js让一段文本中包含的网址可以被访问

    这个功能还是挺刚需的,下面说说实现过程,用到了正则表达式. 1.原本的html部分代码: <h4 id="softadd">链接: https://pan.baidu. ...

  5. json处理总结(前端js和后端java)

    前端(js): json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键,下面将介绍两者之间的相互转换. json字符串:var st ...

  6. 【分享】JS如何为复制的Web文本添加其他信息

    看到了两篇关于这题的讨论,简单的记录一下!o(*￣▽￣*)ブ 1.  stackoverflow , How to add extra info to copied web text 2.  黑客派, ...

  7. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

  8. 简单实现兼容各大浏览器的js复制内容到剪切板

    因为网站文章需要提供几个按钮,单击后实现复制文章内容到剪贴板. 在网上搜索了很多内容,发现都比较乱这里自己整理下,分享给大家 效果图如下: 之前使用的是window.clipboardData.set ...

  9. js 复制文本到剪贴板

    js 复制文本到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. leetcode -- Balanced Binary Tree TODO

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  2. m2014-c->c模拟java的hashmap容器类

    转自:http://bbs.csdn.net/topics/390034346 在java中像ArrayList,HashMap都是现成的,在java.util包中,用的时候直接import java ...

  3. SensorManager

    光照传感器 Android 中每个传感器的用法其实都比较类似,真的可以说是一通百通了.首先第一步要获取到 SensorManager 的实例 SensorManager senserManager = ...

  4. iOS实现截屏 并合适保存

     本文转载至:http://blog.csdn.net/zeng11088/article/details/8664510 分类: UIImageView2013-03-12 16:42 122人阅读 ...

  5. CentOS7 minimal下MySQL安装

    http://www.linuxidc.com/Linux/2016-12/137942.htm 首先要使用root用户登录 卸载: 1.卸载原有程序 yum remove mysql mysql-s ...

  6. 170309、MySQL存储引擎MyISAM与InnoDB区别总结整理

    1.MySQL默认存储引擎的变迁 在MySQL 5.1之前的版本中,默认的搜索引擎是MyISAM,从MySQL 5.5之后的版本中,默认的搜索引擎变更为InnoDB. 2.MyISAM与InnoDB存 ...

  7. [iOS微博项目 - 3.6] - 获取未读消息

    github: https://github.com/hellovoidworld/HVWWeibo   A.获取登陆用户未读消息 1.需求 获取所有未读消息,包括新微博.私信.@.转发.关注等 把未 ...

  8. Rete_algorithm

    https://en.wikipedia.org/wiki/Rete_algorithm https://en.wikipedia.org/wiki/Rete_algorithm The Rete a ...

  9. java基础06 switch

    public class SwitchDemo01 { /** * 韩嫣参加计算机编程大赛 如果获得第一名,将参加麻省理工大学组织的1个月夏令营 如果获得第二名,将奖励惠普笔记本电脑一部 如果获得第三 ...

  10. Bone Collector II---hdu2639（01背包求第k优解）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2639求01背包的第k大解.合并两个有序序列 选取物品i,或不选.最终的结果,是我们能在O(1)的时间内 ...