如何用一个按钮复制5个HTML textarea的内容到剪贴板？

嘿，我来帮你搞定这个需求！首先得先修正一个小问题：你当前的代码里所有<textarea>都用了同一个id="target"，这在HTML规范里是不允许的——id属性必须是页面唯一的，所以咱们先把它们改成用class来统一标识，这样才能批量获取这些元素。

下面是完整的可运行代码方案：

<!-- 先把textarea的id改成class，保证标识合法 -->
<textarea class="target">1</textarea>
<textarea class="target">2</textarea>
<textarea class="target">3</textarea>
<textarea class="target">4</textarea>
<textarea class="target">5</textarea>

<!-- 触发复制的按钮 -->
<button onclick="copyAllTextareas()">复制所有内容</button>

<script>
function copyAllTextareas() {
  // 1. 获取所有带有target类的textarea元素
  const textareas = document.querySelectorAll('.target');
  
  // 2. 遍历所有textarea，拼接它们的内容
  let combinedText = '';
  textareas.forEach(textarea => {
    combinedText += textarea.value;
  });
  
  // 3. 使用现代的Clipboard API复制内容到剪贴板
  navigator.clipboard.writeText(combinedText)
    .then(() => {
      alert('内容已成功复制到剪贴板！');
    })
    .catch(err => {
      console.error('复制失败:', err);
      // 兼容旧浏览器的备选方案（如果Clipboard API不可用）
      const tempInput = document.createElement('input');
      tempInput.value = combinedText;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand('copy');
      document.body.removeChild(tempInput);
      alert('内容已通过兼容模式复制到剪贴板！');
    });
}
</script>

代码说明： #

• 第一步：把原来重复的id换成class="target"，这样可以用document.querySelectorAll批量获取所有目标textarea。
• 第二步：遍历所有textarea，把每个的value（也就是里面的文本内容）拼接成一个字符串combinedText，最终就是你要的12345。
• 第三步：优先使用现代的navigator.clipboard.writeText方法复制内容，这个方法更安全也更简洁；如果遇到不支持该API的旧浏览器，会自动降级到传统的创建临时输入框并执行execCommand('copy')的方案，确保兼容性。

你只需要把这段代码放到HTML页面里，点击按钮就能把所有textarea的内容合并后复制到剪贴板啦！

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