美文网首页让前端飞
简单的复制文本到剪切板

简单的复制文本到剪切板

作者: littleyu | 来源:发表于2020-04-14 10:33 被阅读0次

    copyTextToClipboard

    直接调用会出现 DOMException: Document is not focused.

    最好主动触发,如 click 后调用

    function clipboardCopy (text) {
      if (navigator.clipboard) { // 如果浏览器兼容该 API
        return navigator.clipboard.writeText(text).catch(function (err) {
          throw (err !== undefined ? err : new DOMException('The request is not allowed', 'NotAllowedError'))
        })
      }
    
      // 或者使用 document.execCommand()
    
      // 把需要复制的文本放入 <span>
      const span = document.createElement('span')
      span.textContent = text
    
      // 保留文本样式
      span.style.whiteSpace = 'pre'
    
      // 把 <span> 放进页面
      document.body.appendChild(span)
    
      // 创建选择区域
      const selection = window.getSelection()
      const range = window.document.createRange()
      selection.removeAllRanges()
      range.selectNode(span)
      selection.addRange(range)
    
      // 复制文本到剪切板
      let success = false
      try {
        success = window.document.execCommand('copy')
      } catch (err) {
        console.log('error', err)
      }
    
      // 清除战场
      selection.removeAllRanges()
      window.document.body.removeChild(span)
    
      return success
        ? Promise.resolve()
        : Promise.reject(new DOMException('The request is not allowed', 'NotAllowedError'))
    }
    

    相关文章

      网友评论

        本文标题:简单的复制文本到剪切板

        本文链接:https://www.haomeiwen.com/subject/ephzmhtx.html