如何将多个文本输入复制到剪贴板答案

【问题标题】：How to copy multiple text input to clipboard如何将多个文本输入复制到剪贴板
【发布时间】：2021-04-12 07:58:47
【问题描述】：

我已经学会了如何将单个文本输入复制到剪贴板。但是我似乎无法弄清楚如何将多个文本输入复制到剪贴板。有人可以帮我为我的项目解决这个问题。干杯！

function myFunction() {
  var copyText = document.getElementById("entry.1208432141");
  copyText.select();
  copyText.setSelectionRange(0, 99999) document.execCommand("copy");

【问题讨论】：

这是我的代码伙伴。我尝试添加另一个函数 getElementbyID 但它只复制最后一个文本输入 ID
你一直在覆盖剪贴板的内容。您需要先将所有单独的数据连接成一个值，然后将其复制到剪贴板中。

标签： javascript php html jquery css

【解决方案1】：

正如 CBroe 已经写的那样，您在每次进一步的复制过程中都会覆盖您的缓冲区，因此只剩下最后一个条目。一种可能性是在短时间内创建一个新字段并将所有元素的内容存储在那里，然后将其复制到缓冲区。它可能看起来像这样：

function myFunction(idList) {
   let text = "";
   idList.forEach(fieldid => {
     text += document.getElementById(fieldid).value;
   });

   const tempTextarea = document.createElement("textarea");
   tempTextarea = text;
   document.body.appendChild(tempTextarea);
   tempTextarea.select();
   tempTextarea.setSelectionRange(0, 99999) document.execCommand("copy");
   document.body.removeChild(tempTextarea);
}

myfunction(['entry.1208432141','entry.1208432888'])

当然，这不是完整的代码。例如，如果未找到字段，则不会进行错误处理。但它显示了它是如何工作的。

更新

另一种方法是使用当前浏览器 api。这只有在现代浏览器中才有可能。但要小心，这个方法是异步的。 Can I use navigator.clipboard?

if (navigator.clipboard) {
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!')
  }, function(clipboardError) {
    console.error('Async: Could not copy text: ', clipboardError)
  })
}

【讨论】：