思路:

1.给要复制的内容容器添加一个标签(可以是ID,可以是类名等),通过dom技术获取该容器对象;

2.创建Range对象(某个区域内连续的内容),把该容器对象放进去;

3.将Range对象添加到Selection对象里(以便将它暴露出来,联合document.execCommand('Copy')命令,实现复制功能);

4.给一个Button,绑定copy事件。

代码:

PS: 1.对于Selection对象和Range对象不明白的,请跳转至 https://developer.mozilla.org/zh-CN/docs/Web/API/Selection

       2.此处的message是引用的antd里的message组件;

      3.该代码与是否采用React关系并不大。

React---点击按钮实现内容复制功能的更多相关文章

  1. React 点击按钮显示div与隐藏div,并给div传children

    最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...

  2. jquery点击按钮复制内容

    做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...

  3. js 实现页面点击按钮复制内容

    前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...

  4. javascript学习代码--点击按钮显示内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS实现PC、Android、IOS端的点击按钮复制内容功能

    直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  7. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  8. 例题.点击按钮显示内容+弹窗效果+ajax

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 点击按钮切换内容效果(使用CSS DIV与JavaScript)

    <head><script type="text/javascript">function change_div(id){  if (id == 'gsyw ...

随机推荐

  1. Scala_类和对象

    类是对象的抽象,而对象是类的具体实例.类是抽象的,不占用内存,而对象是具体的,占用存储空间. import scala.beans.BeanProperty class ChecksumAccumul ...

  2. C++引用的用处

    原文:http://www.cnblogs.com/ddx-deng/archive/2012/12/16/3755864.html 一.什么是“引用”?声明和使用“引用”要注意哪些问题? 答:引用就 ...

  3. 成都Uber优步司机奖励政策(4月23日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. Python3抓取javascript生成的html网页

    用urllib等抓取网页,只能读取网页的静态源文件,而抓不到由javascript生成的内容. 究其原因,是因为urllib是瞬时抓取,它不会等javascript的加载延迟,所以页面中由javasc ...

  5. extern "C" 的用意

    extern "C" 修饰符只有在C++代码的时候才用到. C++编译器通常会对变量名和函数名进行改编,这样在链接的时候会出现问题. 假如: 1.用C++编写的Dll,在编译成Dl ...

  6. HDU - 5877 Weak Pair (dfs+树状数组)

    题目链接:Weak Pair 题意: 给出一颗有根树,如果有一对u,v,如果满足u是v的父节点且vec[u]×vec[v]<=k,则称这对结点是虚弱的,问这棵树中有几对虚弱的结点. 题解: 刚开 ...

  7. 洛谷P2973 [USACO10HOL]赶小猪

    https://www.luogu.org/problemnew/show/P2973 dp一遍,\(f_i=\sum_{edge(i,j)}\frac{f_j\times(1-\frac{P}{Q} ...

  8. Wannafly挑战赛25C 期望操作数

    Wannafly挑战赛25C 期望操作数 简单题啦 \(f[i]=\frac{\sum_{j<=i}f[j]}{i}+1\) \(f[i]=\frac{f[i]}{i}+\frac{\sum_{ ...

  9. 如何创建XHTML表单

    首先奉上本菜曾经的作业——一张模仿智联招聘中的注册表单.虽然没有加样式显得很难看,但表单的基本要素已经具备了. 接下来进入正文,开始介绍各表单元素 form标签: 在创建表单时,第一步就是form标签 ...

  10. PCB设计铜箔厚度、线宽和电流关系

    PCB的载流能力取决于一下因素:线宽.线厚.容许温升.在同等条件下,假设10mil的走线能承受1A,那么50mil的走线能承受的电流却不是5A. 如下: 1 盎司 = 0.0014英寸 = 0.035 ...