zoukankan      html  css  js  c++  java
  • 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()
      }
  • 相关阅读:
    Codeforces Canda Cup 2016
    Codeforces Round #377(div 2)
    后缀数组专题
    Codeforces Round #375(div 2)
    Codeforces Round #374(div 2)
    [HDU5902]GCD is Funny(xjb搞)
    [HDU5904]LCIS(DP)
    HDU 1251统计难题
    POJ2104 K-TH NUMBER 传说中的主席树
    poj 3041
  • 原文地址:https://www.cnblogs.com/hl-tyc/p/14246565.html
Copyright © 2011-2022 走看看