React---点击按钮实现内容复制功能
思路:
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---点击按钮实现内容复制功能的更多相关文章
- React 点击按钮显示div与隐藏div,并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- jquery点击按钮复制内容
做移动端的项目遇到一个需求要点击按钮复制dom里的内容,看了很多资料显示必须textarea或者input里的内容才能简单复制,还有就是用插件的了,最终都因为遇到各种问题放弃,最终选择了最简单的点击复 ...
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- javascript学习代码--点击按钮显示内容
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS实现PC、Android、IOS端的点击按钮复制内容功能
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue中点击按钮复制内容
<el-button type="primary" round size="mini" @click="copyUrl">复制u ...
- js点击按钮复制内容到粘贴板
复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...
- 例题.点击按钮显示内容+弹窗效果+ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 点击按钮切换内容效果(使用CSS DIV与JavaScript)
<head><script type="text/javascript">function change_div(id){ if (id == 'gsyw ...
随机推荐
- Modelsim SE自动化仿真——如何将.do文件中自定义的库链接到testbench顶层模块
我们用Modelsim SE进行仿真时,为了方便,一般会编写.do文件来启动当前仿真.关于.do文件的编写,一般网上都有成型的模板,我们只要稍微改几个参数,就可以符合我们的仿真需求了.但是如果仿真时需 ...
- spark练习--由IP得到所在地
今天我们就来介绍,如何根据一个IP来求出这个IP所在的地址是什么,首先我们如果要做这个内容,那么我们要有一个IP地址的所在地字典,这个我们可以在网上购买,形如: 1.0.1.0|1.0.3.255|1 ...
- mfc 类对象的引用
类对象引用 自写复制构造函数 一. 类对象引用 在第4课的时候,我们已经讨论过C++引用特性.类变量的引用呢,实际上也是类似的. Tdate d1; Tdate &d2=d1; 二.自写复制构 ...
- 【HNOI2014】道路堵塞
题面 题解 解法一 这个思路要基于以下一个结论: 当你删掉某条边\((x,x+1)\)时,最短路路线为:\(1\to x(\leq u)\to y(>u) \to n\),并且\(x\to y\ ...
- BZOJ2034 【2009国家集训队】最大收益
题面 题解 第一眼:线段树优化连边的裸题 刚准备打,突然发现: \(1 \leq S_i \leq T_i \leq 10^8\) 这™用个鬼的线段树啊 经过一番寻找,在网上找到了一篇论文 大家可以去 ...
- Spring学习(十九)----- Spring的五种事务配置详解
前段时间对Spring的事务配置做了比较深入的研究,在此之间对Spring的事务配置虽说也配置过,但是一直没有一个清楚的认识.通过这次的学习发觉Spring的事务配置只要把思路理清,还是比较好掌握的. ...
- 矩阵分解-----LDL分解
若一个矩阵A是正定的,那么该矩阵也可以唯一分解为\[{\bf{A = LD}}{{\bf{L}}^{\bf{T}}}\] 其中L是对角元素都为1的下三角矩阵,D是对角元素都为正数的对角矩阵.还是以三维 ...
- python002
1.万恶的”+“号字符串拼接 字符串中的连接符+”会开辟一个新的空间,多一个“+“就会多开辟一个空间,影响性能 2.字符串格式化 ”%S“ :字符类型 ”%D“ ”数字类型 ...
- 模拟websocket推送消息服务mock工具二
模拟websocket推送消息服务mock工具二 在上一篇博文中有提到<使用electron开发一个h5的客户端应用创建http服务模拟后端接口mock>使用electron创建一个模拟后 ...
- Android Library和Android APP、Java Library的区别
Android Library和Android APP.Java Library的区别 Android Library在目录结构上与Android App相同,它能包含构建APP所需的一切(如源代码. ...