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元素
    }
}

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

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

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

相关推荐
慧一居士24 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead26 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_7 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js