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 ...
随机推荐
- PostreSQL崩溃试验全记录
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面: PostgreSQL基础知识与基本操作索引页 回到顶级页面:PostgreSQL索引页 [作者 高健@博客园 luckyjackg ...
- Noip前的大抱佛脚----图论
目录 图论 知识点 二分图相关 DFS找环 并查集维护二分图 二分图匹配的不可行边 最小生成树相关 最短路树 最短路相关 负环 多源最短路 差分约束系统 01最短路 k短路 网络流 zkw费用流 做题 ...
- Codeforces 1155 D Beautiful Array DP,最大子段和
题意 给出一个长度为\(n\)的数列和数字\(x\),经过最多一次操作将数列的一个子段的每个元素变为\(a[i]*x\),使该数列的最大子段和最大 分析 将这个数列分为3段考虑,第一段和第三段是未修改 ...
- 给浏览器和各种软件配置 http https socks5 代理 proxy
只需要像在 idea 里一样,配置好sr的本地代理ip:127.0.0.1 本地代理端口:1080 浏览器和软件的流量即可走 sr ,就能被 sr 代理了 用上代理之后,确实快了好多,这里是在打开 ...
- 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: ...
- 使用Fiddler模拟客户端http响应【转】
转自:使用Fiddler模拟客户端http响应 在客户端开发中,常常需要对一些特殊情况做处理,比如404.503等,又比如服务返回错误数据等.而测试这些情况会比较麻烦,往往都是找开发人员配合修改代码, ...
- javaweb学习5——JSP
声明:本文只是自学过程中,记录自己不会的知识点的摘要,如果想详细学习JavaWeb,请到孤傲苍狼博客学习,JavaWeb学习点此跳转 本文链接:https://www.cnblogs.com/xdp- ...
- selenium 定位不到元素总结
元素在网页上,却会出现定位不到的情况的分析. 1. 定位不正确. 2. 页面还没有加载完就去查找元素了. 3. 有遮罩层. 首先说下第3点. 先前在公司遇到过这样的问题. 页面是显示出来了, 这个元素 ...
- Ubuntu 16.04.4 LTS环境中php7.0使用mysqli失败,数据库无法访问
环境: Ubuntu 16.04.4 LTS php7.0 输入命令php -m,显示如下,发现没有mysqli模块 输入命令sudo apt install php-mysql,安装mysql模块, ...
- Halcon四 双目视觉的标定
原文作者写的一系列博客,挺不错的学习halcon:http://blog.sina.com.cn/s/blog_442bfe0e0100yjtn.html 1.get_image_pointer1(I ...