点击粘贴

点击实现复制粘贴剪切

// 点击复制粘贴剪切，要求点击按钮区域阻止默认行为 onmousedown="event.preventDefault()"
class ClickPaste {
  private _selectedText = ''
  private _mockStart = 0
  private _mockEnd = 0

  // 将选中的字符串缓存起来，并且记住光标选中的起始终止位置
  cacheGetSelection() {
    const text = window.getSelection()?.toString()
    if (text) {
      this._selectedText = text
    }
    const offset = window.getSelection()?.focusOffset
    const target = window.getSelection()?.focusNode?.childNodes[
      offset || 0
    ] as HTMLInputElement
    if (
      window.getSelection() &&
      target &&
      (target.toString() === '[object HTMLInputElement]' ||
        target.toString() === '[object HTMLTextAreaElement]')
    ) {
      if (target === document.activeElement) {
        this._mockStart = target.selectionStart as number
        this._mockEnd = target.selectionEnd as number
      }
    }
  }


  // 将内容放进剪切板
  async copyToClipboard(str: string) {
    if (this._selectedText) {
      try {
        if (navigator.clipboard) {
          await navigator.clipboard.writeText(str)
        }
      } catch (error) {
        // eslint-disable-next-line no-console
        console.warn('Please check navigator.clipboard permission.', error)
      }
    }
  }

  // 从剪切板读取内容
  async readFromClipboard() {
    let str = ''
    try {
      if (navigator.clipboard) {
        str = await navigator.clipboard.readText()
      }
    } catch (error) {
      // eslint-disable-next-line no-console
      console.warn('Please check navigator.clipboard permission.', error)
    }
    return str
  }

  // 剪切 , 判断 selectedText 是否有内容，把内容写进剪切板
  async defaultCut() {
    if (this._selectedText) {
      // 获取当前焦点输入框，把输入框内的文字截取掉，并且把截取的内容写进剪切板
      const activeInput = document.activeElement
      if (
        activeInput?.tagName && ['INPUT', 'TEXTAREA'].includes(activeInput?.tagName)
      ) {
        let value = (activeInput as HTMLInputElement).value as string
        if (value && this._mockStart !== null && this._mockEnd !== null) {
            value = value.slice(0, this._mockStart) + value.slice(this._mockEnd)
            ;(activeInput as HTMLInputElement).value = value
        }
      }
      await this.copyToClipboard(this._selectedText)
    }
  }

  // 粘贴，从剪切板读取数据，写入当前激活的输入框
  async defaultPaste() {
    const clipboardStr = await this.readFromClipboard()
    const activeInput = document.activeElement
    let value = (activeInput as HTMLInputElement).value as string
    if (
        activeInput?.tagName && ['INPUT', 'TEXTAREA'].includes(activeInput.tagName)
    ) {
        value =
        value.slice(0, this._mockStart) +
        clipboardStr +
        value.slice(this._mockEnd)
        ;(activeInput as HTMLInputElement).value = value
    }
  }
}

execCommand 版点击复制

// 将内容放进剪切板
function copyToClip(str: string) {
  const ele = document.createElement('input')
  ele.style.height = '0'
  ele.setAttribute('value', str)
  document.body.appendChild(ele)
  ele.select()
  document.execCommand('copy')
  document.body.removeChild(ele)
}