思路:

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. 时间序列分析工具箱—— h2o + timetk

    目录 时间序列分析工具箱-- h2o + timetk h2o 的用途 加载包 安装 h2o 加载包 数据 教程:h2o + timetk,时间序列机器学习 时间序列机器学习 最终的胜利者是... 翻 ...

  2. error: this 'if' clause does not guard... [-Werror=misleading-indentation]

    解决办法就是if语句的下面加{} 报错的 if (!pMem) return LOS_NOK; 修改后 if (!pMem) { return LOS_NOK; }

  3. 一个将当前目录下HEX文件的第一行数据删除的程序

    为什么要写这样一个函数 在使用SoftConsole开发M3程序时,生成的hex文件,必须要把第一行数据删除,才能在Libero中使用,所以写了这个小工具,这是2.0版本了,第一版是直接删除第一行数据 ...

  4. 使用Sublime Text 3作为React Native的开发IDE

    1.下载安装Sublime 3 Sublime 3的下载地址:http://www.sublimetext.com/3 选相应的平台进行下载,安装. 2.安装Package Control 默认的Su ...

  5. React Native开启实时重载(Enable live Reload)

    传统的原生应用开发中,每一次修改都需要重新编译. 但在 RN 中你只需要刷新一下 JavaScript 代码,就能立刻看到变化. 操作 1.安卓模拟器 按下Ctrl + M,Enable live R ...

  6. 在云服务器搭建WordPress博客(一)实现云服务器与域名的绑定

    随着云的兴起,越来越多的人选择在云服务器上搭建自己的博客,比较著名的开源博客管理系统当属WordPress了,那么怎么在服务器上搭建WordPress呢? 我们需要让别人能够访问我们的博客,就比如输入 ...

  7. spring cloud网关通过Zuul RateLimit 限流配置

    目录 引入依赖 配置信息 RateLimit源码简单分析 RateLimit详细的配置信息解读 在平常项目中为了防止一些没有token访问的API被大量无限的调用,需要对一些服务进行API限流.就好比 ...

  8. tomcat7时遇到启动报错问题 SEVERE: ContainerBase.addChild: start:

    个人说明:错误日志确实是我的,方法都是从其他地儿借鉴过来的,但肯定是能解决错误的方法,亲身体验,安全保障!!! 还有遇到这种问题,多启动几遍可能就行了. 错误日志: SEVERE: Container ...

  9. Python之Django的Model详解

    一.创建数据库 创建数据库 进入数据库: mysql -uroot -p 创建数据库: CREATE DATABASE test1 CHARSET=utf8; 连接数据库 虚拟环境中安装数据库模块:p ...

  10. 3.编写sub过程及开发函数——《Excel VBA 程序开发自学宝典》

    3.1 编写sub过程 实例: Sub 建立10个表() If sheets.count>=10 then exit sub Sheets.add , sheets(sheets.count) ...