js 实现点击复制

最新推荐文章于 2025-07-11 13:05:39 发布

原创最新推荐文章于 2025-07-11 13:05:39 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

前端同时被 3 个专栏收录

32 篇文章

订阅专栏

vue

20 篇文章

订阅专栏

javascript

14 篇文章

订阅专栏

本文介绍两种在网页中实现文本复制的方法，一种是通过创建隐藏的input元素并利用DOM操作实现，另一种是通过监听copy事件并在事件回调中设置clipboardData来完成。

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

项目中有点击某个按钮即复制某文本的需求，这里总结两种方式。

方法一

原理：创建一个隐藏的input，并赋值需要执行复制的文本，选中input中的内容，执行dom自带的复制方法。

function copyPwd(copyText) {
      let input = document.createElement('input') // 创建一个input
      input.value = copyText // 赋值需要复制的内容
      document.body.appendChild(input) // 插入dom
      input.select()  // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      input.style.display = 'none' // 隐藏
      document.body.removeChild(input) // 移除创建的input
      alert('Copy Successfully!')
}

注意：隐藏input的代码必须写在执行复制代码的后面，否则无法复制所需的内容！

方法二

原理：创建事件监听器，监听‘copy’,以vue项目为例：

created() {
    document.addEventListener('copy', (e) => {
      this.eventListenerCopy(e);
    });
},
destroyed() {
    document.removeEventListener('copy', (e) => {
      this.eventListenerCopy(e);
    });
},
methods: {
 eventListenerCopy(e){
    e.clipboardData.setData('text/plain', this.copyText);
    e.preventDefault();
  },
 copy() {
    document.execCommand('Copy'); // 执行浏览器复制命令
  }
}