如何使用jQuery或原生JavaScript实现点击元素复制内容到剪贴板

你给出的示例代码无法生效，是因为select()方法仅支持<input>、<textarea>这类可编辑表单元素，普通的DOM元素（h1、p等）无法直接调用该方法选中内容。完全可以不创建额外可见元素实现复制需求，以下是具体实现方案：

方案1：不创建任何额外元素（基于Selection + Range API） #

这个方案完全不需要新增DOM元素，直接调用浏览器原生的选区API实现内容选中和复制。

原生JavaScript实现 #

// 给所有需要点击复制的元素绑定事件，这里以你示例的h1和p为例
document.querySelectorAll('h1, p').forEach(el => {
  el.addEventListener('click', async function() {
    try {
      // 创建Range对象选中当前元素的文本内容
      const range = document.createRange();
      range.selectNodeContents(this);
      // 清空现有选区后添加新选区
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      // 执行复制
      const copySuccess = document.execCommand('copy');
      // 复制完成后清空选区，避免用户看到选中效果
      selection.removeAllRanges();
      copySuccess ? console.log('复制成功') : console.log('复制失败，请手动复制');
    } catch (err) {
      console.error('复制出错:', err);
    }
  });
});

jQuery版本实现 #

$(function() {
  $('h1, p').click(async function() {
    try {
      const range = document.createRange();
      range.selectNodeContents(this);
      const selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
      const copySuccess = document.execCommand('copy');
      selection.removeAllRanges();
      copySuccess ? console.log('复制成功') : console.log('复制失败');
    } catch (err) {
      console.error('复制出错:', err);
    }
  });
});

方案2：临时创建不可见元素实现（兼容性更好） #

如果需要兼容更低版本的浏览器，可以临时创建一个不可见的textarea元素，赋值后复制，用完直接删除，用户完全无感知：

document.querySelector('h1').addEventListener('click', function() {
  // 创建临时textarea元素
  const tempTextarea = document.createElement('textarea');
  // 赋值为当前元素的文本内容
  tempTextarea.value = this.textContent;
  // 设置不可见
  tempTextarea.style.position = 'absolute';
  tempTextarea.style.left = '-9999px';
  tempTextarea.style.opacity = '0';
  // 插入到页面
  document.body.appendChild(tempTextarea);
  // 选中内容
  tempTextarea.select();
  // 执行复制
  document.execCommand('copy');
  // 移除临时元素
  document.body.removeChild(tempTextarea);
  console.log('复制成功');
});

其他实现建议 #

如果你的项目面向现代浏览器，更推荐使用官方的Clipboard API替代已经被标记为废弃的document.execCommand方法，安全性和稳定性更高，示例如下：

document.querySelector('h1').addEventListener('click', async function() {
  try {
    // 注意Clipboard API仅在HTTPS协议或者localhost本地环境下可用
    await navigator.clipboard.writeText(this.textContent);
    console.log('复制成功');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

如果需要复制的内容包含HTML格式而非纯文本，可以在调用Clipboard API的时候传入ClipboardItem对象实现富文本复制。

内容的提问来源于stack exchange，提问作者heybelix