react 实现复制copy文本内容

思路:
选中想要复制的元素对象
创建range对象,把选中的元素对象放进去
讲range对象添加到selection对象,执行copy命令
代码:

//按钮绑定事件
<Button onClick={copyOrderNumber} className='order-num-operate'>
  Copy
 </Button>
const copyOrderNumber = () => {
//选中节点
    const copyEle = document.querySelector('.order-number-text')
//创建Range对象(某个区域内连续的内容)
    const range = document.createRange()
//清除页面中已有的selection
    window.getSelection().removeAllRanges()
//选中需要复制的节点
    range.selectNode(copyEle)
//执行选中元素
    window.getSelection().addRange(range)
//执行 copy 操作
    const copyStatus = document.execCommand('Copy')
    // 对成功与否定进行提示
    if (copyStatus) {
      Toast.success('Copy Success', 1)
    } else {
      Toast.fail('Copy Failed', 1)
    }
// 移除选中的元素
    window.getSelection().removeAllRanges()
  }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、js代码 function CopyID(id){const range = document.createR...
    咸鱼人柱力阅读 3,456评论 0 0
  • 课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    桃花兰岛主阅读 3,579评论 0 1
  • 需求描述:用户想要通过单击某个文本标签,快速选中该标签内的文本内容并将内容添加至剪切板,供用户实现快速的粘贴内容。...
    sunny_wen阅读 3,856评论 0 0
  • 本章主要介绍:表单、文本框验证与交互、使用其他表单控制。这一章会继续沿用上一章 封装的 EventUtil 对象(...
    了凡和纤风阅读 2,629评论 0 0
  • JavaScript 初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。尽 管目前的 Web ...
    Xyaleo阅读 1,826评论 0 1