JS实现一键复制、选中复制、选中多行复制

JS实现一键复制

首先我们准备一份通用的一键复制代码：

javascript 复制代码

export function copyTextFun(text) {
    if (!text) return false
    var textarea = document.createElement('textarea') 
    textarea.value = text 
    document.body.appendChild(textarea) 
    textarea.select() 
    message.destroy()
    try {
        var successful = document.execCommand('copy') 
        if (successful) {
            console.log('成功')
        } else {
            console.log('失败')
        }
    } catch (err) {
        console.log('失败')
    } finally {
        document.body.removeChild(textarea) 
    }
}

上面的方法就是传入文字，然后就可以实现复制，我们当然可以改造一下，改造成传入一个textarea元素，进入自动获取值，但是这个我们需要改造成获取textarea点击之后的事件对象，我们从中得到当前输入的值。

javascript 复制代码

export function copyText(text) {
    if (!text) return false
    let newText = ''
    if (typeof text !== 'string') {
        newText = (text && text.target && text.target.value) || ''
    } else {
        newText = text
    }
    var textarea = document.createElement('textarea') //创建临时的textarea元素
    textarea.value = newText //将要复制的内容赋值给textarea
    document.body.appendChild(textarea) //将textarea添加到页面上
    textarea.select() //选中textarea中的内容
    message.destroy()
    try {
        var successful = document.execCommand('copy') //执行复制命令
        if (successful) {
            message.success('成功复制！')
        } else {
            message.error('无法复制！')
        }
    } catch (err) {
        message.error('无法复制！')
    } finally {
        document.body.removeChild(textarea) //移除临时的textarea元素
    }
}

message方法是使用的antd的组件，你们可以换成你们自己的提示组件。

使用很简单：

javascript 复制代码

<TextArea onClick={copyText} readOnly rows={2} placeholder="请输入" />

这个时候我们已经可以实现点击复制当前文本框的内容，并提醒复制成功的消息弹窗。

但是我们还是不满足，有时候我们会自己想选择行的复制，拖黑选中的文字进行复制。

选中复制、选中多行复制

javascript 复制代码

function getSelectedText() {
    let selectedText = ''
    if (window.getSelection) {
        // 检查浏览器是否支持 window.getSelection()
        selectedText = window.getSelection().toString() // 获取选中的文本并转换为字符串
    } else if (document.selection && document.selection.type !== 'Control') {
        selectedText = document.selection.createRange().text
    }
    return selectedText
}
export function copyText(text) {
    if (!text) return false
    let newText = ''
    if (typeof text !== 'string') {
        newText = (text && text.target && text.target.value) || ''
        if (!newText) return false
        const newGetSelectedText = getSelectedText()
        // 如果选中的文字在当前输入框中 直接复制当前选中的文字
        if (newGetSelectedText && newGetSelectedText.trim() && newText.includes(newGetSelectedText)) {
            newText = newGetSelectedText
        }
    } else {
        newText = text
    }
    var textarea = document.createElement('textarea') //创建临时的textarea元素
    textarea.value = newText //将要复制的内容赋值给textarea
    document.body.appendChild(textarea) //将textarea添加到页面上
    textarea.select() //选中textarea中的内容
    message.destroy()
    try {
        var successful = document.execCommand('copy') //执行复制命令
        if (successful) {
            message.success('成功复制！')
        } else {
            message.error('无法复制！')
        }
    } catch (err) {
        message.error('无法复制！')
    } finally {
        document.body.removeChild(textarea) //移除临时的textarea元素
    }
}

使用还是和上面的一致，但是我们做了处理，在有选中的时候，点击了就能复制当前拖黑的内容，无论你选中几行，单行还是多行还是几个字，都能实现复制。

点击 -- 选中要复制的内容 -- 开松鼠标 -- 提示复制成功

好了，到这里就完成了这个小功能。