思路:

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. jQuery学习-事件绑定

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Kubernetes学习之路(四)之Node节点二进制部署

    K8S Node节点部署 1.部署kubelet (1)二进制包准备 [root@linux-node1 ~]# cd /usr/local/src/kubernetes/server/bin/ [r ...

  3. CS100.1x-lab0_student

    这是CS100.1x第一个提交的作业,是给我们测试用的.相关ipynb文件见我github.本来没什么好说的.我在这里简单讲一下,后面会更详细的讲解.主要分成5个部分. Part 1: Test Sp ...

  4. mongodb原生node驱动

    写在前面 最近读<node.js学习指南>,对于mongodb没有介绍太多的工作原理,但是对于一个前端开发者,即使你还没有用过这种数据库也可以让你很好的理解和使用       一本非常好的 ...

  5. Unity依赖注入(笔记)

    一.介绍 控制反转(Inversion of Control,简称IoC):整洁架构思想,不允许内部获知外部的存在,这就导致了我们必须在内层定义与外层交互的接口,通过依赖注入的方式将外层实现注入到内部 ...

  6. windows系统下构建Jenkins持续集成

    环境准备 windows10+tomcat+python3.x(安装方法自行百度) 安装Jenkins 从https://jenkins.io/download/ 下载war包 将war包放到tomc ...

  7. RabbitMQ入门:发布/订阅(Publish/Subscribe)

    在前面的两篇博客中 RabbitMQ入门:Hello RabbitMQ 代码实例 RabbitMQ入门:工作队列(Work Queue) 遇到的实例都是一个消息只发送给一个消费者(工作者),他们的消息 ...

  8. 廖雪峰git教程学习笔记3

    commit是一串不便记忆的数字,为了方便记忆,引入tag,tag就跟HEAD一样,就像一个指针,指向commit,且指向是不能变得,一个commit就有一个tag 给当前分支下的当前commit打上 ...

  9. NIO - Buffer

    NIO —— Buffer源码分析 Buffer的类结构 底层的基础类是抽象类-Buffer,其中定义了四个变量:capacity(容量),limit(限制),position(位置),mark(标记 ...

  10. 新手Python第二天(存储)

    Python 列表的创建 创建一个空列表 例如:fruit=[]  创建一个有元素的列表 例如:fruit=['apple','banana','cherry'] 创建嵌套列表 例如:fruit=[[ ...