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 ...
随机推荐
- 时间序列分析工具箱——tidyquant
目录 时间序列分析工具箱--tidyquant tidyquant 的用途 加载包 tq_get:获得数据 从 Yahoo! Finance 获得股票数据 从 FRED 获得经济数据 使用 tq_tr ...
- FSCapture注册码
企业版序列号: name:bluman serial/序列号/注册码:VPISCJULXUFGDDXYAUYF
- shiro配置说明
Shiro主要是通过URL过滤来进行安全管理,这里的配置便是指定具体授权规则定义. Xml代码 <bean id="shiroFilter" class="or ...
- 9.22 下午 (document对象)
document对象 1.找元素:(1)gerElementById()根据ID找 (2)gerElementByClassName()根据Class找,返回数组 (3)gerElem ...
- VC编译连接选项详解
VC编译连接选项详解 大家可能一直在用VC开发软件,但是对于这个编译器却未必很了解.原因是多方面的.大多数情况下,我们只停留在“使用”它,而不会想去“了解”它.因为它只是一个工具,我们宁可把更多的精力 ...
- 自动色彩均衡(ACE)快速算法
ACE算法源自retinex算法,可以调整图像的对比度,实现人眼色彩恒常性和亮度恒常性,通过差分来计算目标点与周围像素点的相对明暗关系来校正最终像素值,有很好的增强效果.但是计算复杂度非常高,本文提出 ...
- Distributed1:链接服务器
链接服务器(Linked Server)允许访问针对OLE DB数据源的分布式异构查询, 通过使用sys.sp_addlinkedserver创建链接服务器后,可以对此服务器运行分布式查询. 如果链接 ...
- 【译】Serverless架构 - 3
原文: https://martinfowler.com/articles/serverless.html 消息驱动型应用 后台数据处理服务是一个不同的例子. 你要写一个需要快速响应UI请求的以用户为 ...
- Android启动问题——黑屏、死机等解决方法
今天用了下Android Studio,出现了一些问题,现在将启动过程中遇到的问题和解决方案列出来,方便大家参考. 安装过程不多说,网上一搜一大把. 那直接说问题吧: 1. 无法启动,报错:Faile ...
- LintCode——尾部的零
尾部的零:设计一个算法,计算出n阶乘中尾部零的个数 样例:11! = 39916800.因此应该返回2 分析:假如你把1 × 2 ×3× 4 ×……×N中每一个因数分解质因数,例如 1 × 2 × 3 ...