[问题探讨]js一键复制功能

tom_wong666

于 2020-01-15 12:18:27 发布

阅读量215

点赞数

分类专栏：问题探讨文章标签： js

本文链接：https://blog.youkuaiyun.com/tom_wong666/article/details/103986908

版权

问题探讨专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的一键复制指定元素内容的方法。通过创建一个隐藏的input元素，将其值设置为目标元素的文本内容，然后选中并执行复制命令，最后移除临时DOM。此方法可在任何支持execCommand('copy')的环境中使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：js一键复制指定元素内容

实现：

1，commonFunc.js


function copyText(selector) {
  return new Promise((resolve, reject) => {
    // 获取需要copy的内容
    const copyItem = document.querySelector(selector)
    // 创建input
    const input = document.createElement('input')
    input.type = 'text'
    input.style.position = 'fixed'
    input.style.top = '100vh'
    document.body.appendChild(input)
    // 给你input赋值
    input.value = copyItem.innerText
    // 选中input文本
    input.select()
    // 执行复制命令
    document.execCommand('copy')
    // 移除dom
    input.remove()
    resolve('复制成功！')
  })
}
const commonFunc = {
  copyText
}
export default commonFunc

2，组件内使用


// 通用功能
import commonFunc from '@/utils/commonFunc'

// selector需要匹配指定 CSS 选择器，指向唯一元素，比如'#newsContent'
commonFunc.copyText(selector).then((res) => {
	console.log('复制成功')
}).catch((err) => {
	console.log(`复制失败，原因是commonFunc.copyText方法报错：${err.message}`)
})