js实现点击复制功能

在 JavaScript 中，实现点击复制功能一般有以下几种方法。

方法一：使用 document.execCommand() 方法。

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;

  // 添加到文档中
  textarea.style.position = 'fixed';
  textarea.style.left = '0';
  textarea.style.top = '0';
  document.body.appendChild(textarea);

  // 选择文本
  textarea.select();
  
  try {
    const result = document.execCommand('copy');
    if (result) {
      console.log('复制成功!');
    } else {
      console.error('复制失败!');
    }
  } catch (error) {
    console.error('复制错误:', error);
  }

  // 移除元素
  textarea.remove();
}

// 示例用法
copyToClipboard('这是要复制的文本内容');
// 鹏仔前端 pjxi.com

方法二：使用 Clipboard API。

function copyToClipboard(text) {
  if (!navigator.clipboard) {
    console.error('浏览器不支持 Clipboard API');
    return;
  }

  navigator.clipboard.writeText(text).then(() => {
    console.log('复制成功!');
  }, () => {
    console.error('复制失败!');
  });
}

// 示例用法
copyToClipboard('这是要复制的文本内容');
// 情话书 qinghuashu.com

方法三：使用第三方库，例如 Clipboard.js。

你可以在项目中通过 npm 安装 Clipboard.js：

npm install clipboard.js

然后在代码中引入并使用它：

const Clipboard = require('clipboard.js');

function copyToClipboard(text) {
  new ClipboardJS('#myButton').on('success', () => {
    console.log('复制成功!');
  });

  new ClipboardJS('#myButton').on('error', () => {
    console.error('复制失败!');
  });
}

// 示例用法
copyToClipboard('这是要复制的文本内容');
// 百科狗 baikegou.com

在上述示例中，myButton 是你要绑定复制事件的按钮元素的 ID。

鹏仔前端 https://www.pjxi.com/