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 ...
随机推荐
- WPF之ListView使用WrapPanel
原文:WPF之ListView使用WrapPanel 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/jiuzaizuotian2014/articl ...
- 10.14 (上午)开课一个月零十天 (PHP环境搭建)
一.修改APACHE的监听端口 2 1.在界面中选apache,弹出隐藏菜单选项,打开配置文件httpd.conf; 2.找到Listen 80 和 ServerName localhost:80; ...
- 【转载】ArcBall二维控制三维旋转
原文:http://oviliazhang.diandian.com/post/2012-05-19/40027878859 由于目前大多的显示器是二维的,要控制三维物体的旋转就显得不那么直接了.Ar ...
- 【Vijos】lxhgww的奇思妙想
题面 题解 求$k$级祖先孙子 为什么要用长链剖分啊??? 倍增并没有慢多少... 其实是我不会 长链剖分做这道题还是看这位巨佬的吧. 代码 #include<bits/stdc++.h> ...
- python爬虫之scrapy框架介绍
一.什么是Scrapy? Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,非常出名,非常强悍.所谓的框架就是一个已经被集成了各种功能(高性能异步下载,队列,分布式,解析,持久化等) ...
- while、for循环控制之if、else
if # score=99 # if score>90: # print('优秀') # elif score<60: # print('不及格') # else: # print('良好 ...
- 并行Linq
有时候我们对大批量数据进行处理,此时并行linq就起作用了. 并行查询 对于以下查询可以耗时会非常大,如下: ; var r = new Random(); , arraySize).Select(x ...
- 【敏捷】7.showcase,开发中必须引起重视的小环节
有人说,测试者来自火星,开发者来自金星.这是因为软件测试员和软件开发者就好比一对冤家,里面的缘由说不清也道不明.开发代表着创造,而测试则代表着摧毁,因为测试的目的就是以各种方式不断地从开发出的产品中发 ...
- C++对运算符进行重载学习笔记
1. 一个类的成员函数是暗含着 this 指针的,eg; #include<iostream> using namespace std; class A{ public: A(){ x ...
- 静态构造器(static constructor)
1.定义: 静态构造函数是实现对一个类进行初始化的方法成员. 它一般用于对静态数据的初始化. 静态构造函数不能有参数,不能有修饰符而且不能被调用,当类被加载时,类的静态构造函数自动被调用. 2.特点: ...