思路:

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. 【Verilog HDL】赋值语句之阻塞赋值方式与非阻塞赋值方式

    刚开始接触Verilog HDL语言时,这种硬件描述语言有一点与软件的程序设计语言直观上的最大区别大概就是这个赋值语句了(这里只是强调直观上的最大区别,事实上的最大区别并非如此). Verilog H ...

  2. Linux入门第二天——基本命令入门(上)

    一.常用命令介绍 常见命令可参考:http://man.linuxde.net/ http://linux.51yip.com/ 请对照参考! 常用的快捷键:http://blog.csdn.net/ ...

  3. redis集群搭建+lua脚本的使用

    详细参考这篇文章(windows) https://blog.csdn.net/qiuyufeng/article/details/70474001 一.使用JAVA代码操作redis集群 publi ...

  4. 【转载】COM 组件设计与应用(九)——IDispatch 接口 for VC6.0

    原文: http://vckbase.com/index.php/wv/1224.html 一.前言 终于写到了第九回,我也一直期盼着写这回的内容耶,为啥呢?因为自动化(automation)是非常常 ...

  5. GPUImage每个类的作用

    28 #import "GPUImageBrightnessFilter.h"                //亮度 29 #import "GPUImageExpos ...

  6. Eclipse无法查看源码 提示source not found

    学习项目代码的时候想要看一下Cookie的源码,已经确定下载到了本地,可是Ctrl+左键点进去,提示source not found(如下图),百度了以后,大家普遍认为需要安装反编译插件jad. 看了 ...

  7. angularjs 常用方法

    一 angular的copy和extend 1.angular.extend() angular.extend():依次将第二个参数及后续的参数的第一层属性(不管是简单的属性还是对象)拷贝,赋给第一个 ...

  8. tabindex 属性

    tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时). 语法:<element tabindex="number">规定元素的 tab 键控 ...

  9. REVIT个人学习笔记——1.简介及熟悉界面

    此贴并非教学,主要是自学笔记,所述内容只是些许个人学习心得的记录和备查积累,难以保证观点正确,也不一定能坚持完成. 如不幸到访,可能耽误您的时间,也难及时回复,贴主先此致歉.如偶有所得,相逢有缘,幸甚 ...

  10. Linux命令对应的英文及整体学习法

    linux命令 注意一下内容收集与互联网,如果觉得有版权问题,请联系. 用Linux命令的时候,如果熟悉对应英文的含义,更有助于理解相应的命令.man: Manual 意思是手册,可以用这个命令查询其 ...