React实现复制功能

最新推荐文章于 2024-03-01 16:30:05 发布

城南挽风

最新推荐文章于 2024-03-01 16:30:05 发布

阅读量4.2k

点赞数 4

本文链接：https://blog.csdn.net/yasuifi/article/details/119648390

版权

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('复制成功')
})

城南挽风

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React实现复制功能

1、用js原生监听copy事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = func
复制链接

扫一扫