将JavaScript变量的输出复制到剪贴板

我不了解JavaScript，但我设法使用各种StackOverflow答案中的一些细节将这些代码组合在一起。它工作正常，并通过警报框输出文档中所有选中复选框的数组

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  return checkbx;
}

或

在函数的末尾，然后像这样调用它：

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('my_id')">Check</button>

检查

---

但它不起作用。没有数据被复制到剪贴板。

好的，我找到了一些时间，按照建议，我能够得到我想要的

这是所有可能感兴趣的人的最终代码。为了澄清，此代码获取特定ID的所有选中复选框，将它们输出到一个数组中，在这里命名为

checkbx

，然后将它们的唯一名称复制到剪贴板

JavaScript函数：

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.push(chkboxes[i].value);
  }
  checkbx.toString();

  // Create a dummy input to copy the string array inside it
  var dummy = document.createElement("input");

  // Add it to the document
  document.body.appendChild(dummy);

  // Set its ID
  dummy.setAttribute("id", "dummy_id");

  // Output the array into it
  document.getElementById("dummy_id").value=checkbx;

  // Select it
  dummy.select();

  // Copy its contents
  document.execCommand("copy");

  // Remove it as its not needed anymore
  document.body.removeChild(dummy);
}

函数GetSelectedCheckBox（chkboxName）{
var checkbx=[]；
var chkboxes=document.getElementsByName（chkboxName）；
变量nr_chkboxes=chkboxes.length；
for（var i=0；i非常有用。我将其修改为将JavaScript变量值复制到剪贴板：

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

出于将任何文本复制到剪贴板的一般目的，我编写了以下函数：

参数的值被插入到新创建的
的值中，然后选择该值，将其值复制到剪贴板，然后将其从文档中删除。
如果有人想将两个不同的输入复制到剪贴板，我只想添加。我还使用了将其放入变量然后放入文本的技术将变量从两个输入输入到一个文本区域

注意：下面的代码来自一个用户，询问如何将多个用户输入复制到剪贴板。我刚刚修复了它，使其正常工作。因此，希望使用一些旧样式，例如使用
var
而不是
let
或
const
。我还建议对按钮使用
addEventListener


函数doCopy（）{
试一试{
var unique=document.querySelectorAll（'.unique'）；
var msg=“”；
unique.forEach（函数（unique）{
msg+=unique.value；
});
var temp=document.createElement（“textarea”）；
var tempMsg=document.createTextNode（msg）；
临时附加子项（tempMsg）；
文件.正文.附件（临时）；
临时选择（）；
文件。执行命令（“副本”）；
文件。主体。移除儿童（临时）；
log（“成功！”）
}
捕捉（错误）{
log（“复制时出错”）；
}
}

复制到剪贴板
当您需要在Chrome开发控制台中将变量复制到剪贴板时，只需使用
Copy（）
命令即可

我成功地将文本复制到剪贴板（而不显示任何文本框），方法是在
正文
中添加一个隐藏的

输入元素，即：

函数副本（txt）{
var cb=document.getElementById（“cb”）；
cb.value=txt；
cb.style.display='block'；
cb.select（）；
document.execCommand（'copy'）；
cb.style.display='none'；
}

复制

在撰写本文时，在元素上设置

display:none

对我来说不起作用。将元素的宽度和高度设置为0也不起作用。因此元素的宽度必须至少为

1px

，才能起作用

以下示例适用于Chrome和Firefox：

    const str = 'Copy me';
    const el = document.createElement("input");
    // Does not work:
    // dummy.style.display = "none";
    el.style.height = '0px';
    // Does not work:
    // el.style.width = '0px';
    el.style.width = '1px';
    document.body.appendChild(el);
    el.value = str;
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);

我想补充一点，我明白浏览器为什么要阻止这种黑客行为。最好公开显示要复制到用户浏览器中的内容。但有时会有设计要求，我们无法更改。

现在有一种方法可以直接做到这一点。它适用于现代浏览器和HTTPS（以及本地主机）仅限。不受IE11支持

IE11有自己的API

可接受答案中的解决方法可用于不安全的主机

function copyToClipboard (text) {
  if (navigator.clipboard) { // default: modern asynchronous API
    return navigator.clipboard.writeText(text);
  } else if (window.clipboardData && window.clipboardData.setData) {     // for IE11
    window.clipboardData.setData('Text', text);
    return Promise.resolve();
  } else {
    // workaround: create dummy input
    const input = h('input', { type: 'text' });
    input.value = text;
    document.body.append(input);
    input.focus();
    input.select();
    document.execCommand('copy');
    input.remove();
    return Promise.resolve();
  }
}

注意：它使用Hyperscript创建输入元素（但应该很容易适应）

无需使输入不可见，因为它的添加和删除速度非常快。此外，当输入隐藏时（即使使用一些巧妙的方法），一些浏览器也会检测到它并阻止复制操作。

函数CopyText（复制，消息）{
var body=$（window.document.body）；
var textarea=$（''）；
textarea.css({
位置：'固定'，
不透明度：“0”
});
textarea.val（toCopy）；
body.append（textarea）；
text区域[0]。选择（）；
试一试{
var successful=document.execCommand（'copy'）；
如果（！成功）
投掷成功；
其他的
警报（信息）；
}捕捉（错误）{
窗口提示（“复制到剪贴板：Ctrl+C，输入”，以进行复制）；
}
textarea.remove（）；
}

复制

我怀疑您能否将原始JS对象复制到剪贴板。

.execCommand（'Copy'）

复制页面上的选择（如果用户首选项允许）。您可以尝试对数组进行字符串化，然后使用它填充textarea，从textarea中选择all，然后使用

execCommand

进行复制。粘贴时，捕获事件，并将内容解析回数组。好的。。感谢您为我指明方向。我认为这可能是不可能的，因为它似乎没有返回任何直接的search结果。所以我想我会按照你的建议去做。这可能是一个愚蠢的问题，但是你会在哪里/如何粘贴一个原始JS对象呢？好的，基本上这是针对wordpress的东西。我只是收集ID=某个ID的所有元素，然后在wordpress条件标记中粘贴逗号分隔的ID。希望这有意义。更正有意义的是…我正在收集所有已被选中的元素，而不是ID=某个ID的元素…；-）这是否可以在不创建HTML元素的情况下完成？例如，我只想在用户单击某个按钮或pre时将字符串复制到用户剪贴板

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    // to avoid breaking orgain page when copying more words
    // cant copy when adding below this code
    // dummy.style.display = 'none'
    document.body.appendChild(dummy);
    //Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('hello world')
copyToClipboard('hello\nworld')

function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

    const str = 'Copy me';
    const el = document.createElement("input");
    // Does not work:
    // dummy.style.display = "none";
    el.style.height = '0px';
    // Does not work:
    // el.style.width = '0px';
    el.style.width = '1px';
    document.body.appendChild(el);
    el.value = str;
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);

function copyToClipboard (text) {
  if (navigator.clipboard) { // default: modern asynchronous API
    return navigator.clipboard.writeText(text);
  } else if (window.clipboardData && window.clipboardData.setData) {     // for IE11
    window.clipboardData.setData('Text', text);
    return Promise.resolve();
  } else {
    // workaround: create dummy input
    const input = h('input', { type: 'text' });
    input.value = text;
    document.body.append(input);
    input.focus();
    input.select();
    document.execCommand('copy');
    input.remove();
    return Promise.resolve();
  }
}