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

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

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

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

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js