1、用js原生监听copy事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><script type="text/javascript">window.onload = function(){document.addEventListener("copy", copy);function copy(e){//做兼容e = window.event ||e;//阻止默认事件行为（复制文本）e.preventDefault();//指定添加数据e.clipboardData.setData("text", "hello，world");}}</script></body>
</html>

2、用复制工具

下载安装：npm i --save copy-to-clipboard

使用：

import React, {Component
} from 'react';
import copy from 'copy-to-clipboard';class App extends Component {handleClick = (e) => {copy(e.target.value)}render() {return (<div className="App"><p><input placeholder='请输入' onClick={this.handleClick}/>          </p><textarea></textarea></div>);}
}

3、封装复制函数

/*** 复制文本到剪切板中** @export* @param {*} value 需要复制的文本* @param {*} cb 复制成功后的回调*/
export function copy(value, cb) {// 动态创建 textarea 标签const textarea = document.createElement('textarea')// 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域textarea.readOnly = 'readonly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'// 将要 copy 的值赋给 textarea 标签的 value 属性  // 网上有些例子是赋值给innerText,这样也会赋值成功，但是识别不了\r\n的换行符，赋值给value属性就可以textarea.value = value// 将 textarea 插入到 body 中document.body.appendChild(textarea)// 选中值并复制textarea.select()textarea.setSelectionRange(0, textarea.value.length)document.execCommand('Copy')document.body.removeChild(textarea)if (cb && Object.prototype.toString.call(cb) === '[object Function]') {cb()}
}

使用：

import { copy } from '@/xxx/xxx'let value = '嘿嘿\r\n我换行了'
copy(value, () => {console.log('复制成功')
})

React实现复制功能相关推荐

react非常适合入门者学习使用的后台管理框架
项目简介该项目提供一个非常简洁的后台管理ui界面,非常适合初学者学习使用.项目结构: 项目地址:GitHub项目地址技术栈 - react - antd - react-router-dom - ...
在 react 里使用 antd
在 react 里使用 antd 在 powershell 里npm i antd 引入方式: import '../node_modules/antd/dist/antd.css'
在React Hook里使用history.push跳转
在React Hook里使用history.push跳转 react hook里用不了this.props.history的解决方法首先引入 import { useHistory } from ' ...
在react hook里使用mobx(配置mobx依赖)
在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的) npm i mobx mobx-react --save save是下载到"de ...
React router 的 Route 中 component 和 render 属性理解
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render.component.children Route 就是用来匹 ...
react 子组件获取变量属性值
刚刚遇到一个问题:子组件属性值绑定了变量,但是在子组件的componentDidMoiunt中拿到的值始终是undefinded.如下: 1 <PieInfo 2 title='有效病案' 3 ...
超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
React Native之ViewPagerAndroid跳转页面问题
前言: 网上目前react-native的教程较少,加上许多帖子还是用的ES5(2015年6月已发布ES6标准),有些细节很难找到答案,这里把遇到的问题做一个分享,让学习者尽量少踩坑. 出现问题: 1 ...
http状态404 vscode_VS Code 调试完全攻略（5）：基于浏览器的 React 应用
每日前端夜话第344篇翻译:疯狂的技术宅作者:Charles Szilagyi 来源:charlesagile 正文共:1750 字预计阅读时间:7 分钟这次我们来研究怎样把调试器连接到用 C ...

React实现复制功能

1、用js原生监听copy事件

2、用复制工具

3、封装复制函数

React实现复制功能相关推荐

最新文章

热门文章