如何无需额外按钮实现点击复制到剪贴板，兼容多textarea场景？

解决方案 #

最小改动适配多textarea（基于你的原有代码修改） #

你原来的代码存在两个核心问题：

• document.querySelector("textarea")只会匹配页面第一个textarea，无法适配多实例
• 内联点击事件没有传递当前触发元素的引用

修改后的HTML代码

<div class="wrapper">
  <!-- 点击时把当前textarea元素作为参数传入函数 -->
  <textarea onclick="copytxt(this)">Lorem 
ipsum dolor sit amet, 
consectetur adipiscing elit. 
Pellentesque bibendum risus 
eros, eu mollis lorem 
consectetur eget.</textarea>
  <!-- 新增的textarea也可以直接复用该逻辑 -->
  <textarea onclick="copytxt(this)">第二个测试文本</textarea>
</div>

修改后的JavaScript代码

function copytxt(textarea) {
  // 直接使用传入的当前点击的textarea，不用查询DOM
  textarea.select();
  // 兼容移动端的选中逻辑
  textarea.setSelectionRange(0, 99999);
  // 执行复制
  document.execCommand("copy");
  // 可选：复制成功的提示，比如临时改变边框颜色
  textarea.style.borderColor = "#2ecc71";
  setTimeout(() => {
    textarea.style.borderColor = "";
  }, 1000);
}

更优雅的无内联事件方案（推荐） #

不用给每个textarea手动加onclick属性，用事件委托实现全量textarea适配，后续动态新增的textarea也能自动支持点击复制功能，同时用现代标准的Clipboard API替代已经废弃的execCommand：

// 全局监听点击事件
document.addEventListener('click', async (e) => {
  // 判断点击的目标是否是textarea
  if (e.target.tagName.toLowerCase() !== 'textarea') return;
  const textarea = e.target;
  try {
    // 用现代Clipboard API实现复制，兼容性覆盖所有主流现代浏览器
    await navigator.clipboard.writeText(textarea.value);
    // 复制成功提示
    textarea.style.borderColor = "#2ecc71";
    setTimeout(() => {
      textarea.style.borderColor = "";
    }, 1000);
  } catch (err) {
    // 降级兼容老浏览器
    textarea.select();
    textarea.setSelectionRange(0, 99999);
    document.execCommand('copy');
  }
})

注意：navigator.clipboard API仅在HTTPS环境或者localhost本地开发环境下可用，符合绝大多数线上生产场景。

用这个方案的话你的HTML里不需要写任何onclick属性，所有页面内的textarea都会自动支持点击复制功能。

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