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 ...
随机推荐
- 大数据入门第十天——hadoop高可用HA
一.HA概述 1.引言 正式引入HA机制是从hadoop2.0开始,之前的版本中没有HA机制 2.运行机制 实现高可用最关键的是消除单点故障 hadoop-ha严格来说应该分成各个组件的HA机制——H ...
- JavaWeb基础—JavaBean
一.什么是JavaBean 一个遵循一定规范的普通的Java类 百度的JavaBean规范: (1)JavaBean 类必须是一个公共类,并将其访问属性设置为 public , 如: public c ...
- python二进制处理详述(转)
python没有二进制类型,但可以存储二进制类型的数据,就是用string字符串类型来存储二进制数据,这也没关系,因为string是以1个字节为单位的. import struct a=12.34 # ...
- 6 [面向对象]-property
1.特性(property) 什么是特性property property是一种特殊的属性,访问它时会执行一段功能(函数)然后返回值 例一:BMI指数(bmi是计算而来的,但很明显它听起来像是一个属性 ...
- Codeforces 914 C. Travelling Salesman and Special Numbers (数位DP)
题目链接:Travelling Salesman and Special Numbers 题意: 给出一个二进制数n,每次操作可以将这个数变为其二进制数位上所有1的和(3->2 ; 7-> ...
- Merge语句中NULL的陷阱
NULL表示unknown,不确定值,所以任何值(包括null值)和NULL值比较都是不可知的,在on子句,where子句,Merge或case的when子句中,任何值和null比较的结果都是fals ...
- yolo算法框架使用二
6,voc数据集训练模型 1)下载数据集 官网提供一些voc数据,是基于2007年到2012年的,你可以通过以下地址下载到: wget https://pjreddie.com/media/files ...
- 腾讯hr面
腾讯hr面面经 20181018 寒暄几句 hr自我介绍 hr介绍面试和最后出结果的时间周期 进入主题 自我介绍 考研成绩专业第一 聊考研(考研的经过.考研和保研) 本科成绩 考研成绩超长发挥还是正常 ...
- RPC之Jersey服务调用处理(一)
1.定义: 远程过程调用, 也叫远程函数调用, 最早出现在Sun公司和HP公司的运行Unix操作系统的计算机中,用于系统间通信的一种机制. RPC的基本通信模型是基于Cli ...
- gulp + angular + requirejs 简单学习
一.安装gulp(已经安装了node环境) npm install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...