思路:

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. 从0开始学golang--1--部署本地服务器

    部署自己的本地服务器. 找了个三方包项目:beego.看了下还不错. 上代码....: 首先直接安装三方包,CMD下:go get github.com/astaxie/beego 安装成功后会在pk ...

  2. QQ开发技术资料集锦

    1.GG2013:可在广域网部署运行的QQ高仿版 http://www.cnblogs.com/justnow/category/503400.html 2. 苏飞博客: C#仿QQ皮肤-皮肤控件窗体 ...

  3. JQuery第一天——入门概述与选择器

    一.什么是JQuery 一个流行的js库 核心理念:write less , do more 优势:  轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏 ...

  4. post提交方式

    post提交方式 为提交 url 路径后的name值 getParameter 是获取url后面的参数的.getattribute 是获取 自己setattribute的.

  5. 2018年美国大学生数学建模竞赛(MCM/ICM) F题解题思路

    任务一:开发价格点,建立综合定价模型. 其中 a 代表开发价格点系数,代表个人财产评估.K 为 PI 交易系数 以这个进行评估,将个人划分为具有合理相似性的子组: 当 a 等于 0-30 时,子组为: ...

  6. sketch 相关论文

    sketch 相关论文 Sketch Simplification We present a novel technique to simplify sketch drawings based on ...

  7. Unity学习笔记(4): 碰撞相关API

    Unity3D中的碰撞: 在unity中,有普通碰撞体Collider和触发器(Trigger)两种碰撞体,两个普通碰撞体会发生碰撞并产生力学现象,触发器则像是个无法触碰而又真实存在的东西,也会触发碰 ...

  8. 【转】利用telnet来进行调试Skynet

    https://blog.csdn.net/WhereIsHeroFrom/article/details/80674408

  9. Netty源码分析第5章(ByteBuf)---->第8节: subPage级别的内存分配

    Netty源码分析第五章: ByteBuf 第八节: subPage级别的内存分配 上一小节我们剖析了page级别的内存分配逻辑, 这一小节带大家剖析有关subPage级别的内存分配 通过之前的学习我 ...

  10. Hyperledger Fabric -- gossip 协议

    Hyperledger gossip   本文记述了Hyperledger Fabric 中 一种网络数据同步协议--gossip,它的主要作用是致力于账本数据的安全传输,保证不同节点之间状态的同步和 ...