思路:

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. 链接SQLServer数据库 导出csv文件

    依赖::::<dependency> <groupId>com.microsoft.sqlserver</groupId> <artifactId>ms ...

  2. 时间序列分析工具箱——tibbletime

    目录 时间序列分析工具箱--tibbletime tibbletime 的用途 加载包 数据 教程:tibbletime 初始化一个 tbl_time 对象 时间序列函数 翻译自<Demo We ...

  3. Linux下查看Mysql数据库端口的方法

    mysql 默认的端口是 3306,但是如果在安装的时候,修改了mysql的默认端口的话,可以采用以下方式查看 第一种方法: 直接查看数据库的配置文件 在/etc/mysql/my.cnf(Linux ...

  4. VC编译连接选项详解

    VC编译连接选项详解 大家可能一直在用VC开发软件,但是对于这个编译器却未必很了解.原因是多方面的.大多数情况下,我们只停留在“使用”它,而不会想去“了解”它.因为它只是一个工具,我们宁可把更多的精力 ...

  5. 【FJOI2016】建筑师

    安利另外一篇\(blog\) 密码泥萌都知道 题面 题解 为了描述方便,这里将建筑称作\(zsy\) 高度为\(n\)的\(zsy\)无论如何都能从左右两侧看到.剩下的部分,从左边看到的是前缀\(ma ...

  6. ubuntu 图形化界面 gui 桌面版 root登录 sorry,that didn't work.please try again! 抱歉,认证失败。请重试

    出现这种问题,用下面的方法就行了 https://jingyan.baidu.com/article/bad08e1e224b2709c85121f1.html 而且我发现,因为我用的是英文版的ubu ...

  7. mysql自动化测试第一个例子

    ################################################################################ # This test verifie ...

  8. 数据结构与算法 —— 链表linked list(06)

    回文链表 链接 请检查一个链表是否为回文链表. 进阶:你能在 O(n) 的时间和 O(1) 的额外空间中做到吗? 解题思路: 回文链表的特点就是对称. 把链表放到栈中去,利用栈的先进后出的规则,和原链 ...

  9. 用adb来修改android嵌入式设备的system只读目录下的东西

    转的一篇: 以修改hosts文件为例: 由于某些原因,可能需要指定域名对应的IP地址.Android是基于Linux的系统,与Linux类似,通过hosts文件来设置. 在Android下,/etc是 ...

  10. 使用Xshell远程访问tensorboard

    在使用tensorflow时,由于本地资源的限制,一般在远程服务器上训练模型,而服务器没有图形界面,那么在训练过程中如何实时地访问tensorboard可视化数据呢? 如果服务器和本地电脑连接在同一个 ...