js实现点击复制功能

在JavaScript中，实现点击复制功能通常涉及到选择文本和使用剪贴板API。以下是一个简单的实现示例：

// 复制文本到剪贴板的函数
function copyTextToClipboard(text) {
  // 创建一个临时的输入框来保存文本
  const textArea = document.createElement('textarea');
  
  // 设置输入框的属性
  textArea.value = text;
  textArea.style.position = 'fixed';
  textArea.style.top = '0';
  textArea.style.left = '0';
  textArea.style.width = '2em';
  textArea.style.height = '2em';
  textArea.style.padding = '0';
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';
  textArea.style.background = 'transparent';
  
  // 将输入框添加到文档中
  document.body.appendChild(textArea);
  
  // 选中输入框的文本
  textArea.select();
  
  // 执行复制命令
  try {
    const successful = document.execCommand('copy');
    console.log(successful ? 'Copy successful' : 'Copy failed');
  } catch (err) {
    console.error('Oops, unable to copy', err);
  }
  
  // 移除输入框
  document.body.removeChild(textArea);
}
 
// 绑定点击事件到按钮
document.querySelector('#copyButton').addEventListener('click', () => {
  const textToCopy = document.querySelector('#textToCopy').textContent;
  copyTextToClipboard(textToCopy);
});

在这个示例中，我们定义了一个copyTextToClipboard函数，它接受一个文本参数并将其复制到剪贴板。我们还创建了一个按钮点击事件监听器，当按钮被点击时，会调用copyTextToClipboard函数并传入需要复制的文本内容。

请注意，document.execCommand('copy')方法在某些浏览器中可能不起作用，尤其是在受限制的上下文环境中（例如某些移动浏览器）或者用户设备的安全设置禁止了自动复制行为的情况下。