您现在的位置是:网站首页> HTML&JS

复制文本到粘贴板的三种实现方法(chrome)

  • HTML&JS
  • 2020-11-25
  • 769人已阅读
摘要

一.采用 textarea存放文本内容

// 将特定字符串拷贝到剪贴板

export function copyToBoard (text) {

    try {

        const input = document.createElement('textarea')

        input.value = text

        document.body.appendChild(input)

        input.focus()

        input.select()

        document.execCommand('copy')

        document.body.removeChild(input)

    } catch (err) {

    // ignore

    }

}


二.采用矩形框存放文本内容

export function copyBigDataToBoard (copyString) {

    try {

        // 移除矩形框

        window.getSelection().removeAllRanges()

        // 创建选中范围

        const range = document.createRange()

        // 创建div元素存放文本

        const divNode = document.createElement('div')

        divNode.innerHTML = copyString

        document.body.appendChild(divNode)

        // 选中div元素中的所有文本

        range.selectNode(divNode)

        window.getSelection().addRange(range)

        // 复制文本到粘贴板

        document.execCommand('copy')

        // 移除矩形框

        window.getSelection().removeAllRanges()

        document.body.removeChild(divNode)

    } catch (err) {

    // ignore

    }


}


三.采用navigator.clipboard.writeText( )复制文本内容

navigator.clipboard.writeText( 'hello clipboard')


Top