思路:

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. PostreSQL崩溃试验全记录

    磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页     回到顶级页面:PostgreSQL索引页 [作者 高健@博客园  luckyjackg ...

  2. Noip前的大抱佛脚----图论

    目录 图论 知识点 二分图相关 DFS找环 并查集维护二分图 二分图匹配的不可行边 最小生成树相关 最短路树 最短路相关 负环 多源最短路 差分约束系统 01最短路 k短路 网络流 zkw费用流 做题 ...

  3. Codeforces 1155 D Beautiful Array DP,最大子段和

    题意 给出一个长度为\(n\)的数列和数字\(x\),经过最多一次操作将数列的一个子段的每个元素变为\(a[i]*x\),使该数列的最大子段和最大 分析 将这个数列分为3段考虑,第一段和第三段是未修改 ...

  4. 给浏览器和各种软件配置 http https socks5 代理 proxy

    只需要像在 idea 里一样,配置好sr的本地代理ip:127.0.0.1   本地代理端口:1080 浏览器和软件的流量即可走 sr ,就能被 sr 代理了 用上代理之后,确实快了好多,这里是在打开 ...

  5. CentOS7.4 部署 Django + Python3 + Apache + Mod_wsgi

    安装环境 Remote: CentOS 7.4 x64 (django.example.com) Python: Python3.6.5 Apache: Apache 2.4.6 Mod_wsgi: ...

  6. 使用Fiddler模拟客户端http响应【转】

    转自:使用Fiddler模拟客户端http响应 在客户端开发中,常常需要对一些特殊情况做处理,比如404.503等,又比如服务返回错误数据等.而测试这些情况会比较麻烦,往往都是找开发人员配合修改代码, ...

  7. javaweb学习5——JSP

    声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...

  8. selenium 定位不到元素总结

    元素在网页上,却会出现定位不到的情况的分析. 1. 定位不正确. 2. 页面还没有加载完就去查找元素了. 3. 有遮罩层. 首先说下第3点. 先前在公司遇到过这样的问题. 页面是显示出来了, 这个元素 ...

  9. Ubuntu 16.04.4 LTS环境中php7.0使用mysqli失败,数据库无法访问

    环境: Ubuntu 16.04.4 LTS php7.0 输入命令php -m,显示如下,发现没有mysqli模块 输入命令sudo apt install php-mysql,安装mysql模块, ...

  10. Halcon四 双目视觉的标定

    原文作者写的一系列博客,挺不错的学习halcon:http://blog.sina.com.cn/s/blog_442bfe0e0100yjtn.html 1.get_image_pointer1(I ...